vigamage vigamage - 11 days ago 7
CSS Question

Bootstrap navbar-fixed-top is not working

I am trying to create a page with a fixed navigation bar at the top of the page. What I need is something like this.

As we can see in above linked page, the content of the page starts after giving priority to the navbar. But in my case, the content starts right from the beginning of the page. It is like the navbar is placed on top of the other content.

enter image description here

You can see the JsFiddle demo here.

In the demo page, I have not added anything new. It contains the source of the page which is linked earlier in this question.

this is my navbar and the other div which have been put inside the body section of the page.

<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
.......
</button>
<a class="navbar-brand" href="#">Bootstrap theme</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
.......
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>

<div class="container theme-showcase" role="main">
.....
</div>


Why can't I see my page as needed. Have I missed something in my code?

Answer

Add CSS:

body {
    padding-top: 70px;
}

You can see this by inspecting the element here. It do exist in css. https://getbootstrap.com/examples/navbar-fixed-top/