How can I add a different menu to the mobile version of my bootstrap theme in WordPress?

问题

I have a main menu for desktop and tablet but I want the links in that menu to change when the user gets to the mobile view. Not really sure where to start. This is what I did for the Bootstrap menu for my desktop version in my header.php file:

<div class="container">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="<?php bloginfo( 'url' ); ?>"<?php bloginfo( 'name' ); ?>><img src="<?php bloginfo('template_directory');?>/img/snaglogo.png" /></a>
</div>
<div class="collapse navbar-collapse">


<?php
    $args = array(
          'menu'         => 'header-menu',
          'menu_class'   =>'nav navbar-nav navbar-right',
          'container'    =>'false'
          );
            wp_nav_menu( $args );

 ?>

</div><!--/.nav-collapse -->

Am I adding another piece for mobile? Not really sure.

回答1:

I would suggest on your navbar using the bootstrap class:

<div class="hidden-xs hidden-sm">

Then creating a separate navbar for mobile with the classes:

<div class="visible-xs visible-sm hidden-md hidden-lg">

This will allow you to set the links to something completely different, without effecting the navbar in an adverse way.

Here is more information about the "hidden" and "visible" classes:

http://getbootstrap.com/css/#responsive-utilities-classes

回答2:

For those of you who are looking to separate the mobile phone screen(the one with the button) and the normal bar only, use these classes:

Button based menu:

<div class="hidden-xs">

Regular menu bar:

<div class="visible-xs hidden-sm hidden-md hidden-lg">

回答3:

Bootstrap 4 offers utilities to hide or add menu items for specific breakpoints. In my case I had to add some menu items in mobile view that are part of a secondary navigation in the desktop view (which disappears on mobile view). So for adding menu items only on screens that are below the lg breakpoint add the d-lg-none class (example is using React syntax):

<li className="nav-item d-lg-none">
   <Link to="/dashboard" className="nav-link" data-toggle="collapse" data-target=".navbar-collapse.show">
      Dashboard
   </Link>
</li>

More information can be found here: https://getbootstrap.com/docs/4.0/utilities/display/

来源：https://stackoverflow.com/questions/24270816/how-can-i-add-a-different-menu-to-the-mobile-version-of-my-bootstrap-theme-in-wo

标签

wordpress

twitter-bootstrap