Bootstrap - navbar-fixed-top covers content

B

8

25

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.

Bestraddle answered 2/11, 2013 at 10:50 Comment(1)

there are several copies of this issue #11125277 says add this css: body { padding-top: 40px; } @media screen and (max-width: 768px) { body { padding-top: 0px; } } ____________________________________________________________________ #10336694 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 – Tricuspid 18/11, 2013 at 18:23

B

22

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>

Barbaraanne answered 26/8, 2014 at 5:41 Comment(1)

Worked for me, but feels so hacky. – Raphael 8/10, 2014 at 22:28

M

11

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

Maidie answered 23/9, 2014 at 22:58 Comment(2)

Yes but it stops the sticky effect so when you scroll down you lose the navbar. – Lysander 13/9, 2016 at 13:30

Thank you! This worked, but yes, you can expect to lose the persistent "sticky" navbar feature. – Venial 6/4, 2018 at 2:2

A

8

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

Armipotent answered 15/12, 2018 at 13:49 Comment(2)

Thanks it worked! In my case, <nav class="navbar navbar-expand-sm bg-secondary navbar-dark sticky-top justify-content-center"> – Stepdaughter 14/3, 2022 at 14:30

In short, sticky-top does the trick – Skiver 22/6 at 18:58

O

1

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

Try this easy way.

Onder answered 25/1, 2022 at 14:5 Comment(1)

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. – Karyolysis 26/1, 2022 at 8:16

T

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.

Theophany answered 30/4, 2015 at 18:30 Comment(1)

Really not a fix. Nav blocks DO change. You dont want to stop that. – Foote 20/9, 2017 at 9:21

H

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

Harrovian answered 18/4, 2019 at 23:33 Comment(0)

S

0

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

Sargeant answered 25/11, 2020 at 21:39 Comment(0)

C

0

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

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

Contempt answered 22/2, 2022 at 15:5 Comment(0)

Recommended topics

Hot tags