top nav bar blocking top content of the page

Question

I have this Twitter Bootstrap code      lt div class  navbar navbar-fixed-top  gt       lt div class  navbar-inner  gt         lt div class  container  gt           lt a class  btn btn-navbar  data-target   nav-collapse  data-toggle  collapse  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  a gt           lt div class  nav-collapse  gt             lt ul class  nav  gt               lt li class  active  gt                 lt a href  some url  gt My Home lt  a gt               lt  li gt               lt li gt                 lt a href  some url  gt Option 1  lt  a gt               lt  li gt               lt li gt                 lt a href  some url  gt Another option lt  a gt               lt  li gt               lt li gt                 lt a href  some url  gt Another option lt  a gt               lt  li gt             lt  ul gt           lt  div gt         lt  div gt       lt  div gt     lt  div gt    But when I am viewing the beginning of the page  the nav bar is blocking some of the content that is near the top of the page   Any idea for how to make it push down the rest of the content lower when the top of the page is viewed so that the content isn t blocked by the nav bar

User · Answer

EDIT  This solution is not viable for newer versions of Bootstrap  where the navbar-inverse and navbar-static-top classes are not available   Using MVC 5  the way I fixed mine  was to simply add my own Site css  loaded after the others  with the following line  body padding  0   and I changed the code in the beginning of  Layout cshtml  to be    lt body gt       lt div class  navbar navbar-inverse navbar-static-top  gt           lt div class  container  gt               if  User Identity IsAuthenticated                     lt div class  top-navbar  gt

User · Answer

you should add    page     padding-top  65px       to not destroy a sticky footer or something else

User · Answer

As seen on this example from Twitter  add this before the line that includes the responsive styles declarations    lt style gt       body           padding-top  60px         lt  style gt    Like so    lt link href  Z bootstrap css bootstrap min css  rel  stylesheet    gt   lt style type  text css  gt      body           padding-top  60px         lt  style gt   lt link href  Z bootstrap css bootstrap-responsive min css  rel  stylesheet    gt

User · Answer

lt div class  navbar  data-spy  affix  data-offset-top  0  gt    If your navbar is on the top of the page originally  set the value to 0  Otherwise  set the value for data-offset-topto the value of the content above your navbar   Meanwhile  you need to modify the css as such    affix    width 100     top 0    z-index  10

User · Answer

The bootstrap v4 starter template css uses   body     padding-top  5rem

User · Answer

In my project derived from the MVC 5 tutorial I found that changing the body padding had no effect  The following worked for me    media screen and  min-width 768px  and  max-width 991px        body           margin-top 100px           media screen and  min-width 992px  and  max-width 1199px        body           margin-top 50px            It resolves the cases where the navbar folds into 2 or 3 lines  This can be inserted into bootstrap css anywhere after the lines     body         margin  0

User · Answer

using percentage is much better solution than pixels   body     padding-top  10     This works regardless of display size      If needed you can still be explicit by adding different breakpoints as mentioned in another answer by  spajus

User · Answer

a much more handy solution for your reference  it works perfect in all of my projects   change your first  div  from   lt div class  navbar navbar-fixed-top  gt    to   lt div class  navbar navbar-default navbar-static-top  gt

User · Answer

Two problems will happen here     Page load  content hidden  Internal links like this will scroll to the top  and be hidden by the navbar      lt nav gt     lt  nav gt                lt  -- 70 pixels tall -- gt   lt a href   hello  gt hello lt  a gt    lt  -- click to scroll down -- gt   lt hr style  margin  100px  gt   lt h1 id  hello  gt World lt  h1 gt     lt  -- Help   I m 70 pixels hidden  -- gt     Bootstrap 4 w  internal page links  To fix 1   as Martijn Burger said above  the bootstrap v4 starter template css uses   body     padding-top  5rem      To fix 2  check out this issue   This code mostly works  but not on 2nd click of same hash    window addEventListener  hashchange   function     scrollBy 0  -70       This code animates A links with jQuery  not slim jQuery         inline theme global code here     document  ready function         var body      html body    NAVBAR HEIGHT   70      function smoothScrollingTo target          if   target   body animate  scrollTop   target  offset   top - NAVBAR HEIGHT   500                a href         on  click   function event         event preventDefault          smoothScrollingTo this hash                 document  ready function          smoothScrollingTo location hash

User · Answer

you can set margin based on screen resolution   media screen and  min-width 768px  and  max-width 991px    body       margin-top 100px      media screen and  min-width 992px  and  max-width 1199px      body       margin-top 50px         body    padding-top  10       nav     position  fixed     background-color   8b0000     width  100      top 0

User · Answer

For bootstrap 3  the class navbar-static-top instead of navbar-fixed-top prevents this issue  unless you need the navbar to always be visible

User · Answer

with navbar navbar-default everything works fine  but if you are using navbar-fixed-top you have to include custom style body   padding-top  60px   otherwise it will block content underneath

User · Answer

I ve had good success with creating a dummy non-fixed nav bar right before my real fixed nav bar    lt nav class  navbar navbar-default  gt  lt  nav gt   lt  -- Dummy nav bar -- gt   lt nav class  navbar navbar-default navbar-fixed-top  gt   lt  -- Real nav bar -- gt       lt  -- Nav bar details -- gt   lt  nav gt    The spacing works out great on all screen sizes

User · Answer

The best solution I ve found so far  that does not involve hard coding heights and breakpoints is to add an extra  lt nav    tag to the markup    lt nav class  navbar navbar-expand-md  aria-hidden  true  gt       lt a class  navbar-brand  href     gt Navbar lt  a gt   lt  nav gt   lt nav class  navbar navbar-expand-md navbar-dark bg-dark fixed-top  gt       lt a class  navbar-brand  href     gt Navbar lt  a gt    By doing it this way the  media breakpoints are identical  the height is identical  provided your navbar-brand is the tallest object in the navbar but you can easily substitute another element in the non fixed-top navbar   Where this fails is with screen readers which will now present 2 navbar-brand elements   This points at the need for a not-for-sr class to prevent that element from showing up for screen readers   However that class does not exist  https   getbootstrap com docs 4 0 utilities screenreaders   I ve tried to compensate for the screen reader issue with aria-hidden  true  but  https   www accessibility-developer-guide com examples sensible-aria-usage hidden  seems to indicate this will probably not work when the screen reader is in focus mode which is of course the only time you actually need it to work

User · Answer

Add to your JS   jQuery document  ready function           body   css        padding-top       navbar   outerHeight      px

User · Answer

I am using jQuery to solve this problem  This is the snippet for BS 3 0 0     window  resize function              body   css  padding-top   parseInt     main-navbar   css  height    10          window  load function              body   css  padding-top   parseInt     main-navbar   css  height    10

User · Answer

Add to your CSS   body        padding-top  65px       From the Bootstrap docs      The fixed navbar will overlay your other content  unless you add padding to the top of the body

User · Answer

Adding a padding like that is not enough if you re using responsive bootstrap  In this case when you resize your window you ll get a gap between top of the page and navbar  A proper solution looks like this   body     padding-top  60px     media  max-width  979px      body       padding-top  0px

User · Answer

Add this    navbar     position  relative

[css] top nav bar blocking top content of the page

Examples related to css

Examples related to twitter-bootstrap