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

Question

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>

This question is related to css twitter-bootstrap

User · Accepted Answer

This is handled by adding some padding to the top of the  lt body gt    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

User · Answer

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...

User · Answer

i solved it using jquery   x000D   x000D   lt script type  text javascript  gt  x000D    document  ready function e    x000D     var h      nav   height     20  x000D        body   animate   paddingTop  h     x000D      x000D   lt  script gt  x000D   x000D   x000D

User · Answer

I know this thread is old  but i just got into that exactly problem and i fixed it by just using the page-header class in my page  under the nav  Also i used the  lt nav gt  tag instead of  lt div gt  but i am not sure it would present any different behavior   Using the page-header as a container for the page  you won t need to mess with the  lt body gt   only if you disagree with the default space that the page-header gives you    x000D   x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  rel  stylesheet   gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 6 js bootstrap min js  gt  lt  script gt  x000D   x000D   x000D   x000D      lt div class  container-fluid  gt  x000D           lt nav class  navbar navbar-default navbar-fixed-top  gt  x000D       x000D               lt div class  navbar-header  gt  x000D                   lt button type  button  class  navbar-toggle collapsed  data-toggle  collapse  data-target   navbar  aria-expanded  false  aria-controls  navbar  gt  x000D                       lt span class  sr-only  gt Toggle navigation lt  span gt  x000D                       lt span class  icon-bar  gt  lt  span gt  x000D                       lt span class  icon-bar  gt  lt  span gt  x000D                       lt span class  icon-bar  gt  lt  span gt  x000D                   lt  button gt  x000D                   lt a class  navbar-brand  href     gt Bootstrap lt  a gt  x000D               lt  div gt  x000D               lt div id  navbar  class  navbar-collapse collapse  gt  x000D                   lt ul class  nav navbar-nav  gt  x000D                       lt li class  active  gt  lt a href     gt Home lt  a gt  lt  li gt  x000D                       lt li class  dropdown  gt  x000D                               lt a href     class  dropdown-toggle  data-toggle  dropdown  role  button  aria-haspopup  true  aria-expanded  false  gt Dropdown  lt span class  caret  gt  lt  span gt  lt  a gt  x000D                               lt ul class  dropdown-menu  gt  x000D                                   lt li gt  lt a href     gt Action lt  a gt  lt  li gt  x000D                                   lt li gt  lt a href     gt Another action lt  a gt  lt  li gt  x000D                                   lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt  x000D                                   lt li role  separator  class  divider  gt  lt  li gt  x000D                                   lt li class  dropdown-header  gt Nav header lt  li gt  x000D                                   lt li gt  lt a href     gt Separated link lt  a gt  lt  li gt  x000D                                   lt li gt  lt a href     gt One more separated link lt  a gt  lt  li gt  x000D                               lt  ul gt  x000D                           lt  li gt  x000D                   lt  ul gt  x000D                   lt div class  navbar-right  gt  x000D                   lt  div gt  x000D               lt  div gt  x000D           lt  nav gt  x000D       lt  div gt  x000D       lt div class  page-header  gt  x000D           lt div class  clearfix  gt  x000D               lt div class  col-md-12  gt  x000D                   lt div class  col-md-8 col-sm-6 col-xs-12  gt  x000D                       lt h1 gt Registration form  lt br   gt  lt small gt A Bootstrap template showing a registration form with standard fields lt  small gt  lt  h1 gt  x000D                   lt  div gt  x000D               lt  div gt  x000D           lt  div gt  x000D       lt  div gt  x000D           lt div class  container  gt  x000D           lt div class  row  gt  x000D               lt form role  form  gt  x000D                   lt div class  col-lg-6  gt  x000D                       lt div class  well well-sm  gt  lt strong gt  lt span class  glyphicon glyphicon-asterisk  gt  lt  span gt Required Field lt  strong gt  lt  div gt  x000D                       lt div class  form-group  gt  x000D                           lt label for  InputName  gt Enter Name lt  label gt  x000D                           lt div class  input-group  gt  x000D                               lt input type  text  class  form-control  name  InputName  id  InputName  placeholder  Enter Name  required gt  x000D                               lt span class  input-group-addon  gt  lt span class  glyphicon glyphicon-asterisk  gt  lt  span gt  lt  span gt  x000D                           lt  div gt  x000D                       lt  div gt  x000D                       lt div class  form-group  gt  x000D                           lt label for  InputEmail  gt Enter Email lt  label gt  x000D                           lt div class  input-group  gt  x000D                               lt input type  email  class  form-control  id  InputEmailFirst  name  InputEmail  placeholder  Enter Email  required gt  x000D                               lt span class  input-group-addon  gt  lt span class  glyphicon glyphicon-asterisk  gt  lt  span gt  lt  span gt  x000D                           lt  div gt  x000D                       lt  div gt  x000D                       lt div class  form-group  gt  x000D                           lt label for  InputEmail  gt Confirm Email lt  label gt  x000D                           lt div class  input-group  gt  x000D                               lt input type  email  class  form-control  id  InputEmailSecond  name  InputEmail  placeholder  Confirm Email  required gt  x000D                               lt span class  input-group-addon  gt  lt span class  glyphicon glyphicon-asterisk  gt  lt  span gt  lt  span gt  x000D                           lt  div gt  x000D                       lt  div gt  x000D                       lt div class  form-group  gt  x000D                           lt label for  InputMessage  gt Enter Message lt  label gt  x000D                           lt div class  input-group  gt  x000D                               lt textarea name  InputMessage  id  InputMessage  class  form-control  rows  5  required gt  lt  textarea gt  x000D                               lt span class  input-group-addon  gt  lt span class  glyphicon glyphicon-asterisk  gt  lt  span gt  lt  span gt  x000D                           lt  div gt  x000D                       lt  div gt  x000D                       lt input type  submit  name  submit  id  submit  value  Submit  class  btn btn-info pull-right  gt  x000D                   lt  div gt  x000D               lt  form gt  x000D       lt  div gt  x000D   x000D   x000D

User · Answer

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  gt   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

User · Answer

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:

_x000D_

var onResize = function() {_x000D_
  // apply dynamic padding at the top of the body according to the fixed navbar height_x000D_
  $("body").css("padding-top", $(".navbar-fixed-top").height());_x000D_
};_x000D_
_x000D_
// attach the function to the window resize event_x000D_
$(window).resize(onResize);_x000D_
_x000D_
// call it also when the page is ready after load or reload_x000D_
$(function() {_x000D_
  onResize();_x000D_
});

_x000D_

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

_x000D_

User · Answer

Just define an empty navbar prior to the fixed one  it will create the space needed    lt nav class  navbar navbar-default   gt   lt  nav gt   lt nav class  navbar  navbar-default navbar-fixed-top   gt        lt div class  container-fluid  gt     Your menu code        lt  div gt   lt  nav gt

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

The answer is

Examples related to css

Examples related to twitter-bootstrap

Tags