twitter bootstrap navbar fixed top overlapping site

Question

I am using bootstrap on my site and am having issues with the navbar fixed top  When I am just using the regular navbar  everything is fine  However  when i try to switch it to navbar fixed top  all the other content on the site shifts up like the navbar isn t there and the navbar overlaps it  here s basically how i laid it out    navbar navbar-fixed-top    navbar-inner      container  container    row       yield content   i tried to copy bootstraps examples exactly but still having this issue only when using navbar fixed top  what am I doing wrong

User · Answer

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

User · Answer

All you have to do is    media  min-width  980px    body   padding-top  40px

User · Answer

As others have stated adding a padding-top to body works great  But when you make the screen narrower  to cell phone widths  there is a gap between the navbar and the body  Also  a crowded navbar can wrap to a multi-line bar  overwriting some of the content again   This solved these kinds of issues for me  body   padding-top  40px     media screen and  max-width  768px        body   padding-top  0px        This makes a 40px padding by default and 0px when under 768px width  which according to bootstrap s docs is the cell phone layout cutoff where the gap would be created

User · Answer

I would do this      add appropriate media query if required to target mobile nav only  nav   overflow-y  hidden  important     This should make sure the nav block doesn t stretch downpage and covers the page content

User · Answer

For handling wrapping lines in menu-bar  apply an id to the navbar  like this    lt div class  navbar navbar-default navbar-fixed-top  role  navigation  id  topnavbar  gt    and add this small script in the head after including the jquery  like this    lt script gt        document  ready function              document body  css  padding-top       topnavbar   height     10             window  resize function                  document body  css  padding-top       topnavbar   height     10                        lt  script gt    That way  the top-padding of the body gets automatically adjusted

User · Answer

All the previous solutions hard-code 40 pixels specifically into the html or CSS in one fashion or another   What if the navbar contains a different font-size or an image   What if I have a good reason not to mess with the body padding in the first place   I have been searching for a solution to this problem  and here is what I came up with     document  ready function            contentwrap    css   margin-top         navbar-fixed-top   height      1    px           window  resize function                contentwrap    css   margin-top         navbar-fixed-top   height      1    px           You can move it up or down by adjusting the  1    It seems to work for me regardless of the size of the content in the navbar  before and after resizing     I am curious what others think about this   please share your thoughts    It will be refactored as not to repeat  btw    Besides using jQuery  are there any other reasons not to approach the problem this way   I ve even got it working with a secondary navbar like this        contentwrap    css   margin-top         navbar-fixed-top   height                  admin-nav   height     1    px       PS  Above is on Bootstrap 2 3 2 - will it work in 3 x As long as the generic class names remain    in fact  it should work independent of bootstrap  right   EDIT  Here is a complete jquery function that handles two stacked  responsive fixed navbars of dynamic size   It requires 3 html classes or could use id s   user-top  admin-top  and contentwrap     document  ready function             admin-top   css   margin-top       user-top   height   0   px             contentwrap    css   padding-top                 user-top   height                  admin-top   height              0    px                 window  resize function                admin-top   css   margin-top       user-top   height   0   px                 contentwrap    css   padding-top                     user-top   height                      admin-top   height                  0    px

User · Answer

This issue is known and there s a workaround in the twitter bootstrap site      When you affix the navbar  remember to account for the hidden area   underneath  Add 40px or more of padding to the  lt body gt   Be sure to add   this after the core Bootstrap CSS and before the optional responsive   CSS    This worked for me   body   padding-top  40px

User · Answer

I put this before the yield container    lt div id  fix-for-navbar-fixed-top-spacing  style  height  42px   gt  amp nbsp  lt  div gt    I like this approach because it documents the hack needed to get it work  plus it also works for the mobile nav   EDIT - this works much better    media  min-width  980px      body       padding-top  60px      padding-bottom  42px

User · Answer

As I ve posted in a similar question  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

use this class inside nav tag     class  navbar navbar-expand-lg navbar-light bg-light sticky-top    For bootstrap 4

User · Answer

The problem is with navbar-fixed-top  which will overlay your content unless specify body-padding  No solution provided here works in 100  cases  The JQuery solution blink shift the page after the page is loaded  which looks weird   The real solution for me is not to use navbar-fixed-top  but navbar-static-top    navbar   margin-bottom 0px     for jumtron support  see http   stackoverflow com questions 23911242 gap-between-navbar-and-jumbotron   lt nav class  navbar navbar-inverse navbar-static-top  gt       lt  nav gt

User · Answer

Further to Nick Bisby s answer  if you get this problem using HAML in rails and you have applied Roberto Barros  fix here   I replaced the require in the  quot bootstrap and overrides css quot  to   require twitter-bootstrap-static bootstrap css erb   See https   github com seyhunak twitter-bootstrap-rails issues 91      you need to put the body CSS before the require statement as follows   import  quot twitter bootstrap bootstrap quot   body   padding-top  40px     import  quot twitter bootstrap responsive quot    require twitter-bootstrap-static bootstrap css erb  If the require statement is before the body CSS  it will not take effect

User · Answer

Ryan  you are right  hard-coding the height will make it work bad in case of custom navbars  This is the code I am using for BS 3 0 0 happily     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

Your answer is right in the docs   Body padding required The fixed navbar will overlay your other content  unless you add padding to the top of the  lt body gt   Try out your own values or use our snippet below  Tip  By default  the navbar is 50px high  body   padding-top  70px     Make sure to include this after the core Bootstrap CSS   and in the Bootstrap 4 docs     Fixed navbars use position  fixed  meaning they   re pulled from the normal flow of the DOM and may require custom CSS  e g   padding-top on the   to prevent overlap with other elements

User · Answer

The solution for Bootstrap 4  it works perfect in all of my projects   change your first line from  navbar-fixed-top   to  sticky-top   Bootstrap documentation reference  About time they did this right  D

User · Answer

I just wrapped the navbar in a    lt div width  100   gt   lt div class  nav-      gt       lt  nav gt   lt  div gt    No fancy hocus pocus but it worked

User · Answer

Just change fixed-top with sticky-top  this way you won t have to calculate the padding  And it works

User · Answer

for Bootstrap 3     I d use following CSS to fix navbar-fixed-top  and the anchor jump overlapped issue based on  https   github com twbs bootstrap issues 1768     fix fixed-bar    body   padding-top  40px     media screen and  max-width  768px      body   padding-top  40px          fix fixed-bar jumping to in-page anchor issue      id  before      display  block     content          margin-top  -75px     height  75px     visibility  hidden

[html] twitter bootstrap navbar fixed top overlapping site

Examples related to html

Examples related to twitter-bootstrap