Bootstrap - navbar-fixed-top covers content

Question

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" title.

I have no idea how can I fix it, because when I resize website (mobile devices size) the header is visible.

Of course I have this kind of problem with headers in other pages (Full Width and 404).

Also, in Index page, it covers some of carousel slider.

Information:

website: http://testerix.site90.com/index.html
bootstrap 2.3.2

Let me know, how can I fix it on all resolutions.

there are several copies of this issue http://stackoverflow.com/questions/11124777/twitter-bootstrap-navbar-fixed-top-overlapping-site says add this css: body { padding-top: 40px; } @media screen and (max-width: 768px) { body { padding-top: 0px; } } ____________________________________________________________________ http://stackoverflow.com/questions/10336194/twitter-bootstrap-top-nav-bar-blocking-top-content-of-the-page this worked for me: For bootstrap 3, navbar-static-top instead of fixed prevents this issue, unless you need the navbar to always be visible — TW Scannell, Nov 18 '13 at 18:23

score 22 · Answer 1 · edited May 23 '17 at 12:24

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>

Worked for me, but feels so hacky. – John Slavick Oct 08 '14 at 22:28 — John Slavick, Oct 08 '14 at 22:28

score 11 · Answer 2 · answered Sep 23 '14 at 22:58

11

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

answered Sep 23 '14 at 22:58

Antonio Jha

1,301
13
13

3

Yes but it stops the sticky effect so when you scroll down you lose the navbar. – rory Sep 13 '16 at 13:30
1

Thank you! This worked, but yes, you can expect to lose the persistent "sticky" navbar feature. – Levi Maes Apr 06 '18 at 02:02

score 8 · Answer 3 · edited Dec 15 '18 at 14:01

8

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

edited Dec 15 '18 at 14:01

Zoe

27,060
21
118
148

answered Dec 15 '18 at 13:49

yay

91
1
1

2

Thanks it worked! In my case, `
`
– Sabzaliev Shukur Mar 14 '22 at 14:30

score 1 · Answer 4 · edited Jan 26 '22 at 08:16

1

var navHeight = $("#menu").height();
$("body").css({paddingTop: (navHeight+12)+'px'});

Try this easy way.

edited Jan 26 '22 at 08:16

Peter Csala

17,736
16
35
75

answered Jan 25 '22 at 14:05

Gökhan KAPUCUOĞLU

11
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 26 '22 at 08:16

score 0 · Answer 5 · answered Apr 30 '15 at 18:30

0

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.

answered Apr 30 '15 at 18:30

developer10

1,450
2
15
31

Really not a fix. Nav blocks DO change. You dont want to stop that. – RichieHH Sep 20 '17 at 09:21

score 0 · Answer 6 · answered Apr 18 '19 at 23:33

0

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

answered Apr 18 '19 at 23:33

DamiCode

1

Max Pietrzak · Answer 7 · 2020-11-27T06:00:30.700

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)
        };

score 0 · Answer 8 · answered Feb 22 '22 at 15:05

0

Try it out. It will retain the fixed property of navbar

.navbar{
  top:0;
  position:fixed;
}

answered Feb 22 '22 at 15:05

Himani Dadem

39
4

Bootstrap - navbar-fixed-top covers content

8 Answers8

Linked