Question

我有两个菜单，一个用于移动视图，另一个用于桌面视图。我正在改成wordpress动态菜单。但是移动菜单工作不正常，它没有显示切换按钮和菜单的正确样式。我在html中有以下代码：

<!-- header -->
<header>
<div id="search-bar">
<div class="container">
<div class="row">
    <form action="#" name="search" class="col-xs-12">
    <input type="text" name="search" placeholder="Type and Hit Enter"><i id="search-close" class="fa fa-close"></i>
    </form>
</div>
</div>
</div>
<nav class="navigation">
<div class="container">
<div class="row">
    <div class="logo-wrap col-md-3 col-xs-6">
        <a href="index.html">WorkHub</a>
    </div>
    <div class="menu-wrap col-md-8 ">
        <ul class="menu">
            <li class="active">
               <a href="index.html">Home</a>
            </li>
            <li>
               <a href="about-us.html">About Us</a>
            </li>
            <li>
                <span>Services</span>
                <ul class="submenu">
            <li><a href="services.html">Services</a></li>
                        <li><a href="service-single.html" class="active">Service Detail</a></li>
                    </ul>
                </li>
                <li>
                    <a href="gallery.html">gallery</a>
                </li>
                <li>
                    <span>News</span>
                    <ul class="submenu">
                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="blog-single.html">Blog Detail</a></li>
                    </ul>
                </li>
                <li>
                    <a href="contact-us.html">Contact</a>
                </li>
            </ul>
        </div>
        <div class="col-md-1 col-xs-6">
            <div id="search-toggle">
                <i class="fa fa-search"></i>
            </div>
        </div>
    </div>
</div>

<!--[ MOBILE-MENU-AREA START ]--> 
<div class="mobile-menu-area">
<div class="container">
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="mobile-area">
                <div class="mobile-menu">
                 <nav id="mobile-nav">
                 <ul>
                    <li><a href="index.html">Home </a></li>
                    <li><a href="about-us.html"> About Us </a></li>
                    <li><a href="services.html">Services</a>
                        <ul class="single">
                            <li><a href="services.html">Services</a></li>
                            <li><a href="service-single.html" class="active">Service Detail</a></li>
                        </ul>
                    </li>
                    <li><a href="gallery.html"> gallery </a></li>
                    <li><a href="blog.html">News</a>
                        <ul>
                            <li><a href="blog.html">Blog</a></li>
                            <li><a href="blog-single.html">Blog Detail</a></li>
                        </ul>
                    </li>
                    <li><a href="contact-us.html">Contact</a></li>
                 </ul>
                  </nav>
                </div>  
            </div>
        </div>
    </div>
</div>
</div>
    <!--[ MOBILE-MENU-AREA END  ]-->    
</nav>
</header>

我的动态代码如下：

<header>
    <div id="search-bar">
        <div class="container">
            <div class="row">
                <form action="#" name="search" class="col-xs-12">
                    <input type="text" name="search" placeholder="Type and Hit Enter"><i id="search-close" class="fa fa-close"></i>
                </form>
            </div>
        </div>
    </div>
     <nav class="navigation">
      <div class="container">
        <div class="row">
            <div class="logo-wrap col-md-3 col-xs-6">
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo('site-title'); ?></a>
            </div>
            <?php 
            wp_nav_menu(array(
            'theme_location' => 'primary',
            'container' => 'div',
            'container_class' => 'menu-wrap col-md-8',
            'menu_class' => 'menu'
            ));
            ?>

        <div class="col-md-1 col-xs-6">
            <div id="search-toggle">
                <i class="fa fa-search"></i>
            </div>
        </div>
    </div>
</div>

<!--[ MOBILE-MENU-AREA START ]--> 
<div class="mobile-menu-area">
    <div class="container">
      <div class="row">
        <div class="col-md-12 col-sm-12">
          <div class="mobile-area">
              <div class="mobile-menu">
              <?php 
            wp_nav_menu(array(
            'theme_location' => 'primary',
            'container' => 'nav',
            'container_class' => 'mobile-nav',
            ));
            ?>
       </div>   
     </div>
  </div>
</div>
</div>
</div>
<!--[ MOBILE-MENU-AREA END  ]-->    
    </nav>
</header>

那么我该如何才能以正确的方式获取移动菜单。感谢你。

Answer 1

试试这个：

<?php 
 wp_nav_menu(array(
 'theme_location' => 'primary',
 'container' => 'div',
 'container_id' => 'menu-wrap col-md-8',
 'menu_class' => 'menu'
  ));
  ?>

我无法为移动版设置我的wordpress菜单

1 个答案: