引导菜单栏在桌面模式下显示切换

时间:2020-12-30 作者:Athi

我在WordPress中设计了一个新主题。我使用引导菜单栏进行响应性设计,但在桌面模式下显示一个切换。

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

1 个回复
SO网友:Q Studio

如果要基于断点(屏幕宽度)隐藏元素,可以使用display BootStrap 4的类-如果使用旧版本的BS,这可能会有所不同。

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

在桌面上隐藏元素的类名的一个简单示例是:

<div class="d-sm-none">HIDDEN ON DESKTOP</div>
这是基于以下规则:

.d-{breakpoint}-{value} for sm, md, lg, and xl.
其中,值为以下值之一:

无内联块