Bootstrap not acting from master page file

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:

enter image description here

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.

possible duplicate of [twitter bootstrap navbar fixed top overlapping site](http://stackoverflow.com/questions/11124777/twitter-bootstrap-navbar-fixed-top-overlapping-site) — Nathan, Jan 22 '15 at 15:55
@Nathan The problem with setting the pixel like shown in the answer is that when the screen size gets smaller the bar gets larger. (More than 70px) — Ben Clarke, Jan 22 '15 at 15:57

score 0 · Answer 1 · answered Feb 08 '15 at 09:15

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

Bootstrap not acting from master page file

1 Answers1