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

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" .

Javascript:

$(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() 函数以来已经有一段时间了，所以我不保证我的语法是正确的。但希望您能理解要点。