发表新帖
发表新帖

twitter bootstrap navbar fixed top overlapping site

后端 未结
关注
18 1734
甜味超标
甜味超标 2020-11-22 11:59

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

相关标签:
18条回答
  • 北恋
    2020-11-22 12:12

    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.

    0 讨论(0)
  • 既然无缘
    2020-11-22 12:14

    I put this before the yield container:

    <div id="fix-for-navbar-fixed-top-spacing" style="height: 42px;">&nbsp;</div>

    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;
  }
}
    0 讨论(0)
  • 情深已故
    2020-11-22 12:15

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

    0 讨论(0)
  • 难免孤独
    2020-11-22 12:18

    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)

    0 讨论(0)
  • 清歌不尽
    2020-11-22 12:21

    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

    0 讨论(0)
  • 渐次进展
    2020-11-22 12:24

    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 <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.

    This worked for me:

    body { padding-top: 40px; }
    0 讨论(0)
 看不清?
提交回复
热议问题