Bootstrap - navbar-fixed-top covers content

后端 未结 6 1461
醉酒成梦
醉酒成梦 2021-02-12 14:36

I have a question about navbar-fixed-top. Well, I have a simple problem with it. My fixed navbar covers content, for example in \"About us\" page, it covers row with \"About us\

相关标签:
6条回答
  • 2021-02-12 15:13

    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)
  • 2021-02-12 15:16

    Try class="navbar-static-top". It still allows navigation bar to be stay on the top but doesn't block content.

    0 讨论(0)
  • 2021-02-12 15:20

    position: sticky instead of position: static did the trick for me.

    0 讨论(0)
  • 2021-02-12 15:24

    Just add an id or class to the content, and then give it a margin top enough to make the content show without the static navbar hindering it and add the "!important" attribute to make it work.....

    0 讨论(0)
  • 2021-02-12 15:26

    the response is in the page:

    Twitter Bootstrap - top nav bar blocking top content of the page

    Add to your CSS:

    body { 
        padding-top: 65px; 
    }
    

    or a more complex solution but responsive, if your navbar change the height( ex in tablets appears in more to 60px; or is different ) use a mixed solution with css and javascript

    CSS:

        #godown{
       height: 60px;
    }
    

    HTML (resumen)

    <body>
    <nav class="navbar navbar-fixed-top " role="navigation" id="navMenu">
    ...
    
    </nav>
    
    <!-- This div make the magic :) -->
    
    <div class="godown-60" id="godown"></div>
    
    <!-- the rest of your site -->
    ...
    

    JAVASCRIPT:

    <script>
    //insert this in your jquery
    //control the resizing of menu and go down the content in the correct position
    
        $("#navMenu").resize(function () {
            $('#godown').height($("#navMenu").height() + 10);
        });
    
        if ($("#navMenu").height() > $('#godown').height()) $('#godown').height($("#navMenu").height() + 10);
    
    </script>
    
    0 讨论(0)
  • 2021-02-12 15:32

    It's possible setting a variable for the paddingTop of the body to the height of the navbar could also work and is subsequently a bit more responsive than a fixed 60/65px value.

    let padding = $("nav").height() + "px";
    

    A practical example is the Bootstrap .navbar-toogler button and adding a click event to it and setTimeout function which allows the height to change then apply the new value as paddingTop to the body.

    jQuery:

    $(".navbar-toggler").click(function(){
                setTimeout(function(){
                    let padding = $("nav").height() + "px";
                    $("body").css("paddingTop", padding)
                }, 500)
            })
    

    vanillaJS:

    document.querySelector(".navbar-toggler").onclick = function(){
                setTimeout(function(){
                    let padding = document.querySelector("nav").offsetHeight + "px";
                    document.body.style.paddingTop=padding;
                }, 500)
            };
    
    0 讨论(0)
提交回复
热议问题