Navigatin / Mobile Navigation Flexbox

[mtbler999]

Hallo,

wenn ich meine Navigation für den Desktop mit
Flexbox mittig ausrichte, dann habe ich das Problem,
dass bei der mobilen Ansicht die mobile Navigation angezeigt wird, aber auch die Desktop Navigation.
Wenn ich die Flexbox CSS Anweisung rausnehme, dann passt es.

Woran liegt das?

desktop-flexbox.PNG
mobile-flexbox.PNG
mobile-ohne_flexbox.PNG
desktop-ohne_flexbox.PNG
css.PNG

[tab]

Ich würde mal schätzen, du hast in der Mobilansicht die Desktop-Navigation mit display:none ausgeblendet, was jetzt in deinem Flexbox CSS mit display:flex überschrieben wird.

[mtbler999]

Ja stimmt.
Gibt es eine Möglichkeit, das mit CSS richtig umzusetzen?

[tab]

Mit Sicherheit ja, die konkreten Lösungsmöglichkeiten hängen natürlich davon ab, wie deine Seite aufgebaut ist. Wie du zwischen den Navigationen umschaltest (media queries? mobiles Seitenlayout?) und ob das mehrere Navigationsmodule sind oder nur eins, das per CSS und/oder Javascript jeweils anders dargestellt wird. Sind es zwei Navigationsmodule, die mit display:none und display:flex unsichtbar bzw sichtbar geschaltet werden, kannst du z.B. dem mobilen Navigationsmodul (oder beiden Modulen) eine zusätzliche Klasse zur Unterscheidung geben und das CSS für das Umschalten entsprechend anpassen.

[mtbler999]

Umschalten tu ich über media queries.
Es sind 2 Module, einmal das normale Navigationsmodul und einmal das mobile Menu.

[Googlebug]

Umschalten tu ich über media queries.
Es sind 2 Module, einmal das normale Navigationsmodul und einmal das mobile Menu.

Wo genau liegt denn da nun dein Problem?

mit

@media only screen and (max-width: 700px) { #header .mod_navigation {display:none}

kannst du die DIV unter 700px ausblenden. Geht das nicht?

[mlweb]

Link zur Seite ist bei solchen Problemen immer ausgesprochen hilfreich.

[mtbler999]

Hier der Link:

[tab]

Funktioniert ja schon fast, nur steht dein CSS mit dem media query zu weit vorne in der Reihenfolge der CSS-Dateien. Danach kommt irgendwann noch das display:flex und überschreibt dein display:none.

[mtbler999]

Funktioniert ja schon fast, nur steht dein CSS mit dem media query zu weit vorne in der Reihenfolge der CSS-Dateien. Danach kommt irgendwann noch das display:flex und überschreibt dein display:none.

Genau das war das Problem.
Die CSS für die mobile Navigation wurde als Externe Stylesheets geladen
und im Seitenlayout ist eingestellt gewesen, dass diese als erstes geladen werden.
ändere ich es, so dass zuerst die internen Stylesheets geladen werden funktioniert es.

Danke.