Bootstrap not acting from master page file - html

Question

I have a master page that has a header bar in the page that is using the bootstrap.
Here is the code
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<div class="left">
<asp:ImageButton ID="btn_home" runat="server" ImageUrl="../Images/HeadHome.png" CssClass="headIcons" />
</div>
<div class="left">
<asp:ImageButton ID="btn_config" runat="server" ImageUrl="~/Images/HeadConfig.png" CssClass="headIcons" />
</div>
<div class="right">
<asp:ImageButton ID="btn_profile" runat="server" ImageUrl="~/Images/HeadProfile.png" CssClass="headIcons" />
</div>
</div>
<!--/.navbar-collapse -->
</div>
</nav>
Here is my Webform ASPX code
<div class="row">
<div class="col-md-12"">
<div class="b-orange" style="background-color: #f29123; height: 5px;"></div>
</div>
</div>
<div class="row">
<div class="col-md-12" style="top: 60px;">
<img src="../Images/bSimplex_Header_Logo.jpg" style="margin: 0 auto; display: block;" />
</div>
</div>
The problem is that the page adds the header but doesn't recognise the height so when i add things into the page it goes from the top and not from the header
Some images:
As you can the first row in my ASPX page is starting from the very top and not from the navbar in the master page.

Answer 1

That is because navbar-fixed-top makes the navbar sticky by position: fixed;.
To have page content always be below the navbar, add body padding:
body { padding-top: 50px; }
Or even better using less:
body { padding-top: #navbar-height; }
See Bootstrap documentation on fixed-to-top navbar