Delete responsive Bootstrap 3 navbar and keep elements inline

1 Views

I have a bit of a problem about how to keep my navbar non responsive. I just have about 5 items on my menu.

If I don’t put collapse for the small screen resolution, the navbar items will be stacked which is not really convenient.

Read More

I would like to make these elements inline (maybe resize them) as it still will be legible for small screen resolutions.

Here is a screenshot and the code for the navbar (I’m using wordpress). I’m using LESS + Grunt to compile so maybe the variables are located in Twitter Bootstrap LESS files.

Two screenshots (first of the large screen rendering – my preference – and the second, showing the current result.

Navbar on large resolution

Navbar on small screen resolutions but stacked

Is there a way to maintain the inline style for this navbar (and not breaking the responsivness of the rest ) ? 

<header class="banner navbar navbar-default navbar-fixed-top" role="banner">
  <div class="container">
    <div class="navbar-header">
        <?php
      if (has_nav_menu('primary_navigation')) :
        wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'nav navbar-nav'));
      endif;?>
    </div>
  </div>
 </header>

Thank you a lot in advance !

Edit : I guess the problem seems to come from this php line (which stacks elements) : 

wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'nav navbar-nav'));
Post Views: 1

Related posts

Leave a Reply

1 comment

  1. Of course it’s not the php code that stacks the elements, but you’ve found the right place to start. Since the code assigns designated classes to the navigation element, remove the ‘nav navbar-nav’ value or change it to some other class name, for example ‘new-navclass’

    wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'new-navclass'));

    Then edit your style.css replicate the inline style menu that you prefer.

    Another way is to write js code to detect screen resize, and remove ‘nav-stacked’ classes from menu elements.