发表新帖
发表新帖

twitter bootstrap navbar fixed top overlapping site

后端 未结
关注
18 1749
甜味超标
甜味超标 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:31

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

    0 讨论(0)
  • 隐瞒了意图╮
    2020-11-22 12:31

    @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);         
});
    0 讨论(0)
  • 执笔经年
    2020-11-22 12:35

    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.

    <nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
    <!-- Nav bar details -->
</nav>

    The spacing works out great on all screen sizes.

    0 讨论(0)
  • 面向向阳花
    2020-11-22 12:35

    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 "bootstrap_and_overrides.css" 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 "twitter/bootstrap/bootstrap";
body { padding-top: 40px; }
@import "twitter/bootstrap/responsive";
=require twitter-bootstrap-static/bootstrap.css.erb

    If the require statement is before the body CSS, it will not take effect.

    0 讨论(0)
  • 暖寄归人
    2020-11-22 12:39

    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

<nav class="navbar navbar-inverse navbar-static-top">
...
</nav>
    0 讨论(0)
  • 無奈伤痛
    2020-11-22 12:39

    All you have to do is 

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