Responsive CSS framework or Bootstrap – navbar breaks on two line – fix

Bootstrap is popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. I faced issue of Bootstrap navbar breaks on two line while designing interactive navbar header as you can see in picture below.

Bootstrap - navbar breaks

And html markup for that is:

This issue comes across almost all the popular responsive CSS framework like PURE or any other grid system on webkit browsers and IE. Fortunately there is a simple code to fix this. Add the following  CSS to your site’s stylesheet.

This CSS rule means we are applying the float: left style to all a tags that are children (immediate descendant) of navbar-header class. So the rule will be applicable to <a href="#" class="navbar-brand">My Project</a>.

You can modify the CSS according to class/id name in your page to  fix Bootstrap navbar breaks and final look will be:

Bootstrap navbar breaks fix

Like this Post? Share