Bootstrap Navigation mobile - wordpress

Question

モバイルレスポンスメニュー用のブラウザのサイズを変更するときに、ナビゲーションを正常に動作させることに問題があります。私は思うほど多くのことを試みました。 ベローは私のナビゲーションのコードであり、リンクはhttp://proof.waxedmedia.co.za/gavinerwin/ です。どうぞよろしくお願いいたします。

<div class="navbar-header container-fluid"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-xs-4 col-sm-6 col-md-4 col-lg-4"> 
         <a href="/"><img src="<?php bloginfo('template_url'); ?>/images/Gav_Sig1.png" alt="signature" class="img-responsive"></a> 
        </div> 
        <div class=" col-xs-6 col-sm-offset-0 col-sm-6 col-md-offset-2 col-md-6 col-lg-offset-2 col-lg-6 "> 
         <nav class="navbar navbar-default" role="navigation"> 
          <div class="row main-nav"> 
           <!-- Toggle get grouped for better mobile display --> 
           <div class="navbar-header"> 
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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> 

<!-- Collect the nav links for toggling --> 
           <div class="collapse navbar-collapse navbar-ex1-collapse"> 
            <?php 
            wp_nav_menu(array(
             'menu' => 'Main Nav Menu', 
             'depth' => 2, 
             'theme_location' => 'primary', 
             'container_class' => 'collapse navbar-collapse', 
             'container' => false, 
             'menu_class' => 'menu', 
             'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 
             'walker' => new wp_bootstrap_navwalker(), 
            )); 
            ?> 
           </div> 
          </div> 
         </nav> 
        </div> 
       </div> 
      </div> 
     </div> 

Answer 1

CSS：

@media (max-width: 767px){ 
.row ul, .row ul li, .row ul li a { 
    padding: 5px 0; 
    font-size: 1.14em; 
    display: block; 
} 
} 

HTML：あなたはrowに.col-xs-4と.col-xs-6を取りました。私は.col-xs-6をcol-xs-8に変更して、ハンバーガーメニューアイコンの配置を改善しました。

<div class="navbar-header container-fluid"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-xs-4 col-sm-6 col-md-4 col-lg-4"> 
     <a href="/"><img src="http://proof.waxedmedia.co.za/gavinerwin/wp-content/themes/gavinerwin/images/Gav_Sig1.png" alt="signature" class="img-responsive"></a> 
     </div> 
     <div class=" col-xs-8 col-sm-offset-0 col-sm-6 col-md-offset-2 col-md-6 col-lg-offset-2 col-lg-6 "> 
     ------- 
     ------ 
     </div> 
    </div> 
    </div> 

これが役立つことを願っています。