Bootstrap Menu bar shows up a toggle in Desktop Mode

admin2025-01-07  7

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',
      ));
Share Improve this question edited Dec 30, 2020 at 9:31 fuxia 107k38 gold badges255 silver badges459 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

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
转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1736258544a520.html

最新回复(0)