1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Bootstrap Mobile Menu

Dieses Thema im Forum "Design" wurde erstellt von Peter G, 25. November 2020.

  1. Peter G

    Peter G Well-Known Member

    Registriert seit:
    7. April 2014
    Beiträge:
    71
    Zustimmungen:
    0
    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
     
  2. Henk1060

    Henk1060 Well-Known Member

    Registriert seit:
    4. September 2014
    Beiträge:
    3.927
    Zustimmungen:
    349
    css media queries
    ist das zauberwort.

    nehme an, das aktuell beide menüs angezeigt werden.
     
  3. Peter G

    Peter G Well-Known Member

    Registriert seit:
    7. April 2014
    Beiträge:
    71
    Zustimmungen:
    0
    Hallo, danke für die Antwort. Nein es wird nur ein Menu angezeigt.


    <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>


    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
     
  4. Peter G

    Peter G Well-Known Member

    Registriert seit:
    7. April 2014
    Beiträge:
    71
    Zustimmungen:
    0
    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
     
  5. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.634
    Zustimmungen:
    1.778
    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.
     
  6. Peter G

    Peter G Well-Known Member

    Registriert seit:
    7. April 2014
    Beiträge:
    71
    Zustimmungen:
    0
    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
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden