Ergebnis 1 bis 10 von 10

Thema: Navigatin / Mobile Navigation Flexbox

  1. #1
    Contao-Nutzer
    Registriert seit
    16.01.2011.
    Beiträge
    150

    Standard Navigatin / Mobile Navigation Flexbox

    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

  2. #2
    Contao-Urgestein
    Registriert seit
    22.10.2013.
    Beiträge
    8.038
    User beschenken
    Wunschliste

    Standard

    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.

  3. #3
    Contao-Nutzer
    Registriert seit
    16.01.2011.
    Beiträge
    150

    Standard

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

  4. #4
    Contao-Urgestein
    Registriert seit
    22.10.2013.
    Beiträge
    8.038
    User beschenken
    Wunschliste

    Standard

    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.

  5. #5
    Contao-Nutzer
    Registriert seit
    16.01.2011.
    Beiträge
    150

    Standard

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

  6. #6
    Contao-Nutzer
    Registriert seit
    03.05.2019.
    Beiträge
    56

    Standard

    Zitat Zitat von mtbler999 Beitrag anzeigen
    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
    Code:
    @media only screen and (max-width: 700px) { #header .mod_navigation {display:none}
    kannst du die DIV unter 700px ausblenden. Geht das nicht?

  7. #7
    Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    4.086
    Partner-ID
    7421

    Standard

    Link zur Seite ist bei solchen Problemen immer ausgesprochen hilfreich.
    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
    Immer dran denken: Contao-Check zum Testen der Servervoraussetzungen (Contao 2, Contao 3 und Contao 4) und zum Prüfen einer bestehenden Installation (bis Contao 3.5)

  8. #8
    Contao-Nutzer
    Registriert seit
    16.01.2011.
    Beiträge
    150

    Standard

    Hier der Link:
    Geändert von mtbler999 (20.05.2019 um 16:54 Uhr)

  9. #9
    Contao-Urgestein
    Registriert seit
    22.10.2013.
    Beiträge
    8.038
    User beschenken
    Wunschliste

    Standard

    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.

  10. #10
    Contao-Nutzer
    Registriert seit
    16.01.2011.
    Beiträge
    150

    Standard

    Zitat Zitat von tab Beitrag anzeigen
    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.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •