Bootstrap Menu bar shows up a toggle in Desktop Mode

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

<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',
      ));

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

<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',
      ));

• menus
• twitter-bootstrap

Share Improve this question edited Dec 30, 2020 at 9:31 fuxia♦ 107k3838 gold badges255255 silver badges459459 bronze badges asked Dec 30, 2020 at 8:08 AthiAthi 101 2

• Do you mean that you don't want this menu to be displayed on desktop ? – Q Studio Commented Dec 30, 2020 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 Commented Jan 1, 2021 at 17:32

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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