由 (php)wordpress 创建的响应式菜单答案

【问题标题】：Responsive menu created by (php)wordpress由 (php)wordpress 创建的响应式菜单
【发布时间】：2016-04-01 02:06:11
【问题描述】：

我在 wordpress 中做了一个菜单（网站是 [http://andreadis.loginet.gr/][1]）。当用户从 wordpress 创建菜单项时，会自动生成此菜单。在这里，我很困惑如何让它在响应式中垂直打开。

Header.php 是

 <!-- header -->
    <header>
        <div class="overNavPanel">
        <div class="container">
            <div class="col-md-12">
                <div class="row overNavPanel">
                    <div class="col-md-2 col-sm-6" id="logo">
                        <img class="img-reponsive" src="/wp-content/uploads/2015/12/logo.png" alt="logo.png">
                    </div>
                    <div class="col-md-4 col-md-offset-6 col-sm-6" id="top-right-contact">                      
                                    <image class="img-reponsive" src="/wp-content/uploads/2015/12/contact.png" alt="call-icon.png">


                    </div> <!--col-md-4 col-md-offset-7-->      
                </div><!--row-->
            </div>              
        </div>  <!--container-->
        </div><!--overNavPanel-->
        <nav id="myNavbar" class="navbar navbar-default" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>           
                    </div>
                 <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="navDiv">
            <div class="container">
                <div class="col-md-12">
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                        <ul id="nav" class="nav nav-pills nav-justified">
                          <li><?php wp_nav_menu(array('container_class'=>'nav','container'=>'container'));?></li>

                   </div>
                 </div>  
            </div>
        </div>
    </header>
    <!-- /header -->

【问题讨论】：

标签： css menu wordpress

【解决方案1】：

一些发现：

您正在加载两次 Bootstrap JavaScript。我想这就是为什么崩溃不起作用的原因。确保 Bootstrap JS 只加载一次。
上面的（非 PHP 生成的）HTML 结构与 Bootstrap 示例不完全一致，因此您可能需要对其进行修改以使其正常工作。这是我的小提琴：https://jsfiddle.net/masa671/bjv1ovbw/
PHP 生成的部分：调用wp_nav_menu() 来生成列表项将不起作用。您需要一个为 Bootstrap 生成正确结构的 PHP 实现。 This one 看起来很有希望，但我猜你已经在为 Wordpress 使用 Bootstrap 主题，它可能也有相应的实现？您使用的是哪个主题？

【讨论】：

【解决方案2】：

你可以使用这个插件为你创建一个响应式菜单responsive-menu

或者你可以查看这个网站navnav.co

有许多现成的响应式导航选择你喜欢的并应用它的 JS 和 CSS

【讨论】：