Bootstrap Mobile Menu

  • Hallo WP Gemeinde,

    ich erstelle ein Wordpress Theme mit Bootstrap. Bootstrap ist installiert und mit WordPress verknüpft. Funktioniert auch soweit wie es soll.

    Jetzt habe ich ein Problem welches ich trotz Suchens nicht lösen konnte.

    Ich habe zwei Menus erstellt. Eins soll angezeigt werden wenn die Seite mit dem Desctop angesurft wird und das andere wenn die Seite mobil angesurft wird. Beide Menus sind über die functions.php registriert und lassen sich auch einzeln aufrufen. WP_Bootstrap_Navwalker ist auch installiert. Soweit funktioniert auch alles.

    Wie kann ich es nun steuern das beim mobilen ansurfen das Mobile Menu aufgerufen wird und beim ansurfen mit großem Bildschirm eben das andere Menu.
    Grüße Peter G

    • 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

  • Hallo, danke für die Antwort. Nein es wird nur ein Menu angezeigt.

    [PLAIN]
    <a class="cr-header" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_html( get_bloginfo( 'description' ) ); ?>" rel="home"><?php the_custom_logo(); ?></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <?php
    wp_nav_menu(array(
    'theme_location' => 'header-menu-home',
    'container' => 'div',
    'container_id' => 'navbarSupportedContent',
    'container_class' => 'collapse navbar-collapse justify-content-end',
    'menu_id' => false,
    'menu_class' => 'navbar-nav',
    'depth' => 3,
    'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
    'walker' => new wp_bootstrap_navwalker()
    ));
    ?>
    </div>
    [/PLAIN]

    Nein es wird immer nur das Menu angezeigt welches ich für große Bildschirme vorgesehen habe. Ich geh davon aus das sich die 'theme_location' ändern muss wenn die Seite mobil angesurft wird. Wie kann ich das anstellen. css media queries ist schon der Ansatz. Nur wie kann ich das im script ändern?
    Grüße Peter G

  • Hallo, ich denke ich habe eine Lösung gefunden. Ich habe mit Onkel if und Tante else gesprochen die mir dann ein entsprechendes template ausgeben.
    LG Peter G

  • Tipp am Rande: Oft ist bei einem Ansatz im Template auf dem Server das Problem die nötige Unterscheidung von "grossem Bildschirme" und "mobil angesurft" bereits auf dem Server.

    Das ist etwas komplexer, als man sich das zunächst vorstellt. Mobilgeräte haben zig verschiedene Bildschirmgrössen und inzwischen teils höhere Auflösungen als ältere PCs und Laptops usw. und wenn dann das Thema Caching ansteht, entstehen weitere neue Problematiken daraus.

    Daher liefert man in der Regel vom Server eine Version für alle Clients, die sich alleine über CSS Mediaqueries und im Einzelfall im Client laufende Scripts an die Umgebung anpasst. Das ist auch mit dem Hinweis "aktuell beide" von @Henk1060 gemeint.

  • Hallo, danke für die Antwort und die Anregung. Ich habe die Sache nochmal überdacht und benutze nur noch ein Menu. Das funktioniert wunderbar und erfüllt auch den Zweck. Manchmal macht man es einfach nur umständlich und kompliziert.

    Also nochmal Danke. Problem ist gelöst.

    LG Peter G

Jetzt mitmachen!

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