将两个引导菜单折叠为一个下拉菜单

时间:2017-05-17 作者:Sarah Wegerif

我在Wordpress上创建了一个带有引导功能的导航栏,它有两个单独的菜单,我想将它们折叠成一个菜单。我把这些菜单分开,因为我想在它们之间有一个居中的标志。菜单可以工作,但当它们折叠时,我的下拉列表无法单击。

这是我的代码:

 <section id="navbar">
           <div class="navbar-wrapper">
            <div class="navbar navbar-default" role="navigation">
                <div class="container">
                    <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><!-- navbar-header -->

                <div class="logo"><img src="<?php bloginfo(\'stylesheet_directory\'); ?>/assets/img/SJ-circle.png" width="200px" height="200px" alt="Savvy Jack Wear" class="img-responsive center-block"></div>    

                <?php
                    wp_nav_menu( array(

                        \'theme_location\'    => \'menu-1\',
                        \'container\'         => \'nav\',
                        \'container_class\'   => \'navbar-collapse collapse\',
                        \'menu_class\'        => \'nav navbar-nav navbar-left\'
                    ));
                ?>


                <?php
                    wp_nav_menu( array(

                        \'theme_location\'    => \'menu-2\',
                        \'container\'         => \'nav\',
                        \'container_class\'   => \'navbar-collapse collapse\',
                        \'menu_class\'        => \'nav navbar-nav navbar-right\'
                    ));
                ?>



                </div><!-- container -->
            </div><!-- navbar -->


    </div><!-- navbar-wrapper -->
    </section>  
我不确定需要改变什么?它是容器类还是数据目标,两者都是,还是完全是其他什么?

谢谢

1 个回复
SO网友:Adam Kaczmarek

我也有同样的问题,解决方法很简单。在菜单中添加以下内容:

到左侧菜单

\'container_id\'    => \'navbarNavDropdown-left\',
到右侧菜单

\'container_id\'    => \'navbarNavDropdown-right\',
您刚刚将数据目标更改为:

data-target="#navbarNavDropdown-left,#navbarNavDropdown-right"

结束

相关推荐

Odd spacing in Navigation Bar

我正在重新设计my website, 我很难找到是什么导致导航项目之间的间距(我假设是边距)。我一直在钻研chrome开发工具,但我在任何地方都找不到导致它的原因。请注意,当您在项目之间悬停时,项目之间会有一个明显的白色条带。