bootstrap navbar is breaking when screen is resized

My bootstrap navbar looks good on full laptop screen, on resizing it to smaller width it breaks.

This is my html part.

<nav role="navigation" class="navbar navbar-default">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">Brand Name</a>
    </div>
    <!-- Collection of nav links, forms, and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">


        <ul class="nav navbar-nav head-nav">
            <li><a href="#">about us</a></li>
            <li><a href="#">our plan</a></li>
            <li><a href="#">visit blog</a></li>
            <li><a href="#">contact us</a></li>
            <li><a href="#">sign in</a></li>
        </ul>
    </div>
</nav>

Following is my css section :

ul.nav.navbar-nav.head-nav {
 margin-left: 36%;
}
.head-nav li{
 margin: 0 0 0 0;
 padding: 0 26px;
}

nav.head-nav:last-child {
    margin-right: 0% ;
}

This is what it looks in full width: This is how it breaks on resize : I am not great fan of using pixels, want to achieve this with % only ! any bootstrap classes can help me here ? I want navbar to be responsive on smaller width.

Answers


I have faced the same problem on my website quite recently. I am not aware of any solution that doesn't use pixel screen sizes and I think there is no point in using % instead of px. See below why.

The problem is with the point at which the navbar collapses. By default, Bootstrap collapses at 768px. If you increase this, your navbar will collapse sooner and your problem will disappear.

The best way to do this is to customize your bootstrap file and change the @grid-float-breakpoint to 850px (or whatever size you need, in case this is not the point at which you want to collapse). You can easily customize bootstrap 3 from http://getbootstrap.com/customize/?id=9720390

Hope this helps.


Need Your Help

How to use phpDoc with overloaded methods?

php overloading documentation-generation phpdoc

Let's say I have a PHP class called Color, it's constructor accepts various params.

Cocos2d-x: How to port a Cocos2d-x project developed with XCode to Android (via Eclipse)?

android eclipse xcode cocos2d-iphone cocos2d-x

I have developed a Cocos2d-X app with XCode which works perfectly when I launch it from XCode on an iOS device.