0

I designed a new theme in WordPress. I used Bootstrap Menu bar for responsive design but shows up a toggle in Desktop Mode.

enter image description here

<div id="nav">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>          
    </div>
    <?php
    wp_nav_menu( array(
            'menu'              => 'top-menu',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'navbar-collapse collapse',
            'menu_class'        => 'nav navbar-nav',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
            'walker'            => new wp_bootstrap_navwalker())
        );
    ?>
  </div><!-- /.container-fluid -->
</nav>
add_theme_support('menu');
require_once('wp-bootstrap-navwalker.php');
register_nav_menus(
   array(
        'top-menu' => 'Top Menu Location',
         'mobile-menu' => 'Mobile Menu Location',
      ));
2
  • Do you mean that you don't want this menu to be displayed on desktop ? – Q Studio Dec 30 '20 at 8:50
  • No, On the Desktop screen, it display in toggle mode. I solved the issue. Because of bootstrap version conflict, it shows that – Athi Jan 1 at 17:32
0

If you want to hide elements based on breakpoints ( screen widths ) - you can use the display classes of BootStrap 4 - this might be different if you use an older version of BS.

https://getbootstrap.com/docs/4.0/utilities/display/

A simple example of a class name to hide an element on desktop would be:

<div class="d-sm-none">HIDDEN ON DESKTOP</div>

This is based on the rule:

.d-{breakpoint}-{value} for sm, md, lg, and xl.

Where value is one of:

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.