I am currently working on creating a page layout with a fixed navigation bar positioned at the top. I am aiming for a design similar to the one showcased here.
Upon examining the example linked above, it appears that the content of the page begins below the navbar section. However, in my case, the content starts right from the very top of the page, with the navbar seemingly placed on top of the rest of the content.
https://i.sstatic.net/yE221.png
You can view the JsFiddle demonstration here.
The demo page essentially contains the same source code as provided earlier in this question.
This is the structure of my navbar and other div elements within 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>
I am encountering an issue where my page does not display as intended. Is there something crucial that I may have overlooked in my code?