Verknüpfungen nebeneinander setzen - CSS mobile Styles

Question

Ich habe meine Links vertikal in meinem Standard-CSS gestapelt, aber ich versuche, das Navigationsgerät an den Anfang der Seite zu schieben und sie horizontal in Mobile einzustellen. Scheint nicht zu passieren. Die Website ist in WordPress, was die Bestimmung der Namen von Elementen schwierig macht.

#sidebaar a, #sidebaar li { 
text-align:right; 
clear:both; 

}

#sidebaar{ 
width:150px; 
text-align, right; 
align-content:right; 
display:inline-block; 
width:100%; 

}

In Medien Stile:

#sidebaar a, #sidebaar ul li, #sidebaar ul li a{ 
display:inline; 
clear:none; 

} #sidebaar{ 
    width:100%; 
} 

können Meine Seite hier eingesehen werden - http://www.ubart320.org/students/mariaroo/gallery/

Answer 1

Ihre header und nav Elemente enthalten (in verschiedenen Regeln) sowohl width als auch max-width Definitionen von 150px für maximale Breite und 160/360px für Breite, die verhindern, dass Ihr Menü breiter wird.

Sie haben width: 100%; und max-width: none; für beide zu definieren, falls erforderlich, fügen Sie !important to those values

Answer 2

Sie haben einige flippige Code geht. Aus irgendeinem Grund haben Sie zwei Menüs auf dem Handy angezeigt. Allerdings habe ich die zweite Menü display: none; und angewandter diese Stile ein akzeptables Ergebnis (gilt dies für Sie Handy Stile) zu erhalten:

nav{ 
    width: 100%; 
    max-width: none; 
} 
ul#menu-menu-2{ 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    flex-wrap: wrap; 
} 
#menu-menu-2 li{ 
    margin: 0 2.5px; 
} 

Siehe das Endergebnis unten. Es sieht so aus, als hättest du noch etwas Arbeit auf dem Foto-Raster, aber das horizontale Nav ist akzeptabel. Lassen Sie mich wissen, wenn Sie weitere Fragen haben!