P-Dun-can P-Dun-can - 10 days ago 5
CSS Question

Bootstrap Navigation mobile - wordpress

I'm having issues getting the nav to work when sizing down the browser for mobile response menus. I've tried as many things as I can think of.
Bellow is the code for my navigation and the link is http://proof.waxedmedia.co.za/gavinerwin/
please can you help me get it looking correct!

<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

CSS:

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

HTML : You took .col-xs-4 and .col-xs-6in a row . I have changed .col-xs-6 to col-xs-8 for a better placement of hamburger menu icon.

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

I hope this helps.

Comments