Regeln für Mobiles Menü / Ausgeklapptes Menü

  • Liebes Forum!


    Ich habe eine Webseite mit WP-ocean und Elementor (free) erstellt. (samuelseger.com)

    Ich habe ein Header-Menü erstellt (Stil: Vertikal) und die Hintergrundfarbe Transparent.
    In der Mobilen Version ist das Menü ein Dropdown-Menü mit Hamburger-Icon. Beim Aufrufen der Seite ist das Menü eingeklappt.

    Wie kann ich einstellen, dass das Menü beim Betreten der Seite ausgeklappt ist? (Es könnte auf der (Start-)Seite "Main" immer ausgeklappt sein.
    Wie kann ich überhaupt spezifische regeln für das Menü im ausgeklappten und eingeklappten Zustand festlegen?

    Vielen Dank im Vorraus
    Grüße
    Michael

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Sorry für den Doppelpost! Ich bekomme das Problem seit Wochen nicht in den Griff.

    Mein Ziel ist ja, dass beim betreten der Mobilen Webseite direkt die Menüpunkte zu sehen sind.

    Es könnte auch auf der Startseite das normale Headermenü (statt des Hamburgermenüs) angezeigt werden. Auch das bekomme ich leider nicht hin. Gibt es eine Möglichkeite für das Media Querie eine Ausnahme für eine bestimmte Page-ID festzulegen?

  • Ergänze das bei "Zusätzliches CSS" im Customizer:

    Code
    body.vertical-header-style.left-header #site-header.vertical-header { left: 0; }
    #site-header.vertical-header .vertical-toggle { display: none; }
  • Danke für die schnelle Antwort!
    Es funktioniert leider noch immer nicht. (Ich habe den Code bei "Custom CSS" im Customizer eingegeben, hoffe das war richtig)
    Könnte es sein, dass evtl. einer meiner sonstigen Zeilen diese Lösung blockieren?

  • Du hast den Code nicht 1:1 eingetragen. Und zudem vor deinem statt dahinter. Also bitte diesen hier hinter den bisherigen Code dort einfügen:

    CSS
    body.vertical-header-style.left-header #site-header.vertical-header { left: 0 !important; }
    body #site-header.vertical-header .vertical-toggle { display: none; }

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!