Question

我正在使用Bootstrap从头开始创建一个WordPress主题。我现在正在制作菜单，到目前为止一切顺利。我为顶部窗口小部件创建了一个右对齐的div，以显示语言标记。我已经删除了折叠类，因此小部件总是显示在菜单中。问题是，如果你在一个较小的屏幕上，我想把小部件放在菜单中，所以用户必须单击菜单按钮才能看到菜单和小部件。有什么建议吗？

这是我的代码：

<nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">TEST
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="<?php echo site_url(); ?>"><?php bloginfo('name'); ?></a>
            </div>


            <div id="navbar" class="navbar-collapse collapse navbar-left">
                          <?php wp_nav_menu( array(
                            'menu_class' => 'nav navbar-nav',
                            'depth'             => 2,
                            'container'         => 'div',
                            'container_class'   => 'collapse navbar-collapse',
                            'container_id'      => 'bs-example-navbar-collapse-1',
                            'menu_class'        => 'nav navbar-nav',
                            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                            'walker'            => new wp_bootstrap_navwalker()
                            ) ); ?>
            </div>
    <div id="navbar" class="navbar-right">

        <div class="top-right">
        <div class="top-widget"> <?php dynamic_sidebar( 'right-top' ); ?> </div>
            </div>
    </div>

          </div>
        </nav>

Answer 1

我建议您使用javascript来克隆小部件并将其附加到您的菜单，然后使用CSS显示/隐藏它以获得适当的屏幕尺寸。

请注意重复的ID <nav id="navbar"。最好做出正确的<nav id="navbar-right"。

<强> Javacript：

$(document).ready(function () {
   $('#navbar-right .top-widget')
     .clone()
     .appendTo( $('#navbar') )
     .attr('id', 'widget-within-navbar');
}):

<强> CSS：

#widget-within-navbar{ display: block }
@media (min-width: 768px) {
  #widget-within-navbar { display: none }
}

免责声明：自从我使用jQuery的 clone（）和 appendTo（）功能以来，已经有一段时间了，所以我不会这样做。保证我的语法正确。但希望你能得到主旨。

在响应式菜单中的导航栏中显示div

1 个答案: