breadcrumb not appearing due to the navbar fixed at top

I have markup defined in the page as below:

<div class="navbar navbar-default navbar-fixed-top">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

        </button>   <a class="navbar-brand" href="#">Project name</a>

    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav nav-pills">
            <li class="active"><a href="#">Home</a>
            </li>
            <li><a href="#">Companies</a>
            </li>
            <li><a href="#">Help</a>
            </li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <ul class="breadcrumb">
            <li><a href="#">Home</a>
            </li>
            <li><a href="#">About</a>
            </li>
            <li class="active"><a href="#">Help</a>
            </li>
        </ul>
    </div>
</div>

When the page renders the breadcrumb hides behind the navbar. Any bootstrap way of fixing it? Or is this a bug?

Ps: jsFiddle : http://jsfiddle.net/KNsYt/2/

Answers


It is clearly defined in bootstrap documents itself as below:

Body padding required

The fixed navbar will overlay your other content, unless you add padding to the top of the . Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

So, give 50 or more pixels of padding to the body to solve the issue. check this fiddle.

Make sure to include this after the core Bootstrap CSS.

body {
padding-top:60px
}

Need Your Help

Get current Novell Username in java

java username novell

Quick question, I have been working with my teacher to get a check-in client-server program up and running. The purpose is basically if you need help you click the help button on the client dialog ...

Check in location service is active

iphone ios location

I'm trying to figure out how to detect if the location services are active and searching for the users location. This is to create a location toggle button.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.