Bootstrap css hides portion of container below navbar navbar-fixed-top

I am building a project with Bootstrap and im facing little issue .I have a container below the Nav-top.My issue is that some portion of my container is hidden below the nav-top header.I dont want to use top-margin with container. Pls see below html in which im facing the issue

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="~/stylesheets/bootstrap.css"/>
<link rel="stylesheet" href="~/stylesheets/bootstrap-responsive.css"/>

</head>
<body>
    <div class="navbar navbar-fixed-top ">
        <div class="navbar-inner">
            <div class="container">
           <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
                <div class="nav-collapse"><ul class="nav" id="navbar"><li ng-class="{active:section=='plunks'}" class="active"><a href="/plunks/trending"><i class="icon-home"></i>Home</a></li><li><a target="_self" href="/edit/"><i class="icon-calendar"></i>General Election 2014</a></li><li class="divider-vertical">
                    </li><li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">
                        <i class="icon-eye-open">
                        </i>Assembly Elections
                        <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                                <li><a href="#/HTML5Apps">Assembly Elections 2013</a></li>
                        </ul>
                         </li><li class="divider-vertical">
                    </li><li ng-class="{active:section=='tags'}"><a href="/tags"><i class="icon-th"></i>Constituecy</a></li><li ng-class="{active:section=='discuss'}"><a href="/discuss"><i class="icon-time"></i>Election News</a></li><li class="divider-vertical"></li><li><a href="https://github.com/filearts/plunker"><i class="icon-bell"></i>Candidate</a></li></ul></div>
             </div>
         </div>
    </div>
  <div  class="container" >
   <ul class="nav nav-pills">
    <li class="active">
    <a href="#">Popular</a>
    </li>
    <li><a href="#">Trending</a></li>
    <li><a href="#">Latest</a></li>
    </ul>
   </div>

    <script src="~/Scripts/jquery.js"></script>
    <script src="~/Scripts/bootstrap-dropdown.js"></script>
    <script src="~/Scripts/Collapse.js"></script>
</body>
</html>

Solution 1:

This is handled by adding some padding to the top of the <body>.

As per Bootstrap's documentation on .navbar-fixed-top, try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

  body {
    padding-top: 70px;
  }

Also, take a look at the source for this example and open starter-template.css.

Solution 2:

I guess the problem you have is related to the dynamic height that the fixed navbar at the top has. For example, when a user logs in, you need to display some kind of "Hello [User Name]" and when the name is too wide, the navbar needs to use more height so this text doesn't overlap with the navbar menu. As the navbar has the style "position: fixed", the body stays underneath it and a taller part of it becomes hidden so you need to "dynamically" change the padding at the top every time the navbar height changes which would happen in the following case scenarios:

The page is loaded / reloaded.
The browser window is resized as this could hit a different responsive breakpoint.
The navbar content is modified directly or indirectly as this could provoke a height change.

This dynamicity is not covered by regular CSS so I can only think of one way to solve this problem if the user has JavaScript enabled. Please try the following jQuery code snippet to resolve case scenarios 1 and 2; for case scenario 3 please remember to call the function onResize() after any change in the navbar content:

var onResize = function() {
  // apply dynamic padding at the top of the body according to the fixed navbar height
  $("body").css("padding-top", $(".navbar-fixed-top").height());
};

// attach the function to the window resize event
$(window).resize(onResize);

// call it also when the page is ready after load or reload
$(function() {
  onResize();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Solution 3:

Just define an empty navbar prior to the fixed one, it will create the space needed.

<nav class="navbar navbar-default ">
</nav>
<nav class="navbar  navbar-default navbar-fixed-top ">
     <div class="container-fluid">
// Your menu code 
     </div>
</nav>

Solution 4:

It happens because with navbar-fixed-top class the navbar gets the position:fixed. This in turns take the navbar out of the document flow leaving the body to take up the space behind the navbar.

You need to apply padding-top or margin-top to your container, based on your requirements with values >= 50px. (or play around with different values)

The basic bootstrap navbar takes height around 40px. So if you give a padding-top or margin-top of 50px or more, you will always have that breathing space between your container and the navbar.

Solution 5:

I too have had this problem but solved it without script and only using CSS. I start by following the recommended padding-top for a fixed menu by setting of 60px described on the Bootstrap website. Then I added three media tags that resize the padding at the cutoff points where my menu also resizes.

<style>      
    body{
        padding-top:60px;
    }
    /* fix padding under menu after resize */
    @media screen and (max-width: 767px) {
        body { padding-top: 60px; }
    }
    @media screen and (min-width:768px) and (max-width: 991px) {
        body { padding-top: 110px; }
    }
    @media screen and (min-width: 992px) {
        body { padding-top: 60px; }
    }
</style>

One note, when my menu width is between 768 and 991, the menu logo in my layout plus the <li> options cause the menu to wrap to two lines. Therefore, I had to adjust the padding-top to prevent the menu from covering the content, hence 110px.

Hope this helps...