Bootstrap - navbar-fixed-top covers content

后端未结

关注

 6  1464

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)