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    lt html gt   lt head gt   lt meta name  viewport  content  width device-width    gt   lt title gt Index lt  title gt   lt link rel  stylesheet  href    stylesheets bootstrap css   gt   lt link rel  stylesheet  href    stylesheets bootstrap-responsive css   gt    lt  head gt   lt body gt       lt div class  navbar navbar-fixed-top   gt           lt div class  navbar-inner  gt               lt div class  container  gt              lt button data-target   nav-collapse  data-toggle  collapse  class  btn btn-navbar collapsed  type  button  gt               lt span class  icon-bar  gt  lt  span gt               lt span class  icon-bar  gt  lt  span gt               lt span class  icon-bar  gt  lt  span gt             lt  button gt                   lt div class  nav-collapse  gt  lt ul class  nav  id  navbar  gt  lt li ng-class   active section   plunks    class  active  gt  lt a href   plunks trending  gt  lt i class  icon-home  gt  lt  i gt Home lt  a gt  lt  li gt  lt li gt  lt a target   self  href   edit   gt  lt i class  icon-calendar  gt  lt  i gt General Election 2014 lt  a gt  lt  li gt  lt li class  divider-vertical  gt                       lt  li gt  lt li class  dropdown  gt  lt a class  dropdown-toggle  href     data-toggle  dropdown  gt                           lt i class  icon-eye-open  gt                           lt  i gt Assembly Elections                          lt b class  caret  gt  lt  b gt                           lt  a gt                           lt ul class  dropdown-menu  gt                                   lt li gt  lt a href    HTML5Apps  gt Assembly Elections 2013 lt  a gt  lt  li gt                           lt  ul gt                            lt  li gt  lt li class  divider-vertical  gt                       lt  li gt  lt li ng-class   active section   tags    gt  lt a href   tags  gt  lt i class  icon-th  gt  lt  i gt Constituecy lt  a gt  lt  li gt  lt li ng-class   active section   discuss    gt  lt a href   discuss  gt  lt i class  icon-time  gt  lt  i gt Election News lt  a gt  lt  li gt  lt li class  divider-vertical  gt  lt  li gt  lt li gt  lt a href  https   github com filearts plunker  gt  lt i class  icon-bell  gt  lt  i gt Candidate lt  a gt  lt  li gt  lt  ul gt  lt  div gt                lt  div gt            lt  div gt       lt  div gt     lt div  class  container   gt      lt ul class  nav nav-pills  gt       lt li class  active  gt       lt a href     gt Popular lt  a gt       lt  li gt       lt li gt  lt a href     gt Trending lt  a gt  lt  li gt       lt li gt  lt a href     gt Latest lt  a gt  lt  li gt       lt  ul gt      lt  div gt        lt script src    Scripts jquery js  gt  lt  script gt       lt script src    Scripts bootstrap-dropdown js  gt  lt  script gt       lt script src    Scripts Collapse js  gt  lt  script gt   lt  body gt   lt  html gt

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 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    lt style gt            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           lt  style gt    One note  when my menu width is between 768 and 991  the menu logo in my layout plus the  lt li gt  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

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

User · 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 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   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   lt script src  https   ajax googleapis com ajax libs jquery 1 10 2 jquery min js  gt  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

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

Examples related to css

Examples related to twitter-bootstrap