モバイル版のワードプレスメニューを設定できません

Question

モバイルビュー用とデスクトップビュー用の2つのメニューがあります。私はWordPressの動的メニューに変更しています。しかし、モバイルメニューが正しく動作していない、それはトグルボタンとメニューの適切なスタイルを表示していません。

<!-- 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> 

をし、次のように私の動的なコードは次のとおりです：私はHTMLに以下のコードを持って

<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' 
)); 
    ?>