CODEWITHSUNDEEP
twitter-bootstrap
Alex
Alex

Reputation: 2349

twitter bootstrap navbar fixed top overlapping page after navigation

The bootstrap site says

Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the . Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.

I did that. It works when the page is first showed or scrolled to top.

I also have an affixed secondary navbar that let's you navigate down to sections of the visible page.

When the page scrolls down it stops when the linked anchor is at the top. But the problem is: this is covered by the navbar. So parts of the content is covered.

I've tried scrolling the page some pixels further by using this after the navigation:

window.scrollBy(0,-70);

But this does not work and it confuses the affixed secondary navbar which is sometimes moved.

How can I link to a section and have it show completely when using a navbar that is fixed to the top?

I must be doing something very wrong as this seems to be a very frequent use case and I would expect it to work out of the box.

Upvotes: 0

Views: 3141

Answers (1)

Alex
Alex

Reputation: 2349

The issue can be solved by giving the anchors positive padding and negative margins like this:

.anchor {
    padding-top: 73px;
    margin-top: -73px;
}

as explained here: Page scrolls to top also fixed navbar when external link opens Tab

Upvotes: 5

Related Questions