bootstrap navigation mobile - wordpress

Question

Ich habe Probleme, das Nav zu arbeiten, wenn die Größe des Browsers für mobile Antwort Menüs. Ich habe so viele Dinge ausprobiert, wie ich mir vorstellen kann. Bellow ist der Code für meine Navigation und der Link ist http://proof.waxedmedia.co.za/gavinerwin/ bitte können Sie mir helfen, es richtig aussehen zu bekommen!

<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: Sie nahm .col-xs-4 und .col-xs-6 in einem row. Ich habe .col-xs-6 zu col-xs-8 für eine bessere Platzierung des Hamburgermenüikone geändert.

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

Ich hoffe, das hilft.