How do i make my menu bar responsive? The menu doesn't change together with the header when I crop my window to mobile size, leaving an empty space between header image and menu bar or showing menu two times repeated.

1 Answer 1


Your nav menu bar responcive while can user bootstrap framework.

This like code insert in function.php

Bootstrap responcive nav menu wordpress

// This code insert in header.php

<div class="container"> 
  <nav class="navbar navbar-default" role="navigation">  
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#medi-temp-navbar-collapse"> 
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span> 
      <div class="collapse navbar-collapse" id="medi-temp-navbar-collapse">    
            if ( has_nav_menu( 'primary' ) ) {
                wp_nav_menu( array( 
                    'theme_location' => 'primary',
                      'walker'=>new wp_bootstrap_navwalker(),
                      'menu_class'=>'nav navbar-nav',
   </nav><!-- nav -->
</div><!-- container -->  

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.