top fixed navbar overlapping page after navigation

[barbalex]

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

http://getbootstrap.com has the exact same issue. It has been (accidentally?) covered up by adding huge padding-top of 80px to h1 titles. But it bites you when you navigate to a h2 sub-title like this here: http://getbootstrap.com/components/#nav-tabs.

Also: The huge padding-top on h1 makes the first h1-title on the page to be placed oddly lower than the nav next to it when you first enter the page.

[cvrebert]

It has been (accidentally?) covered up by adding huge padding-top of 80px to h1 titles.

No, I believe that's an intentional workaround.

[mdo]

There are several solutions to this kind of stuff—you can Google for them as we have none in the docs or framework for it. As @cvrebert we have only a janky semi-workaround for it.

[cvrebert]

@mdo Have we considered adding pointers to such solutions in the docs?

[carasmo]

I did this on all anchors when my sticky navbar kicks in: every anchor has a padding-top equal to the height of the navbar plus 10px and a margin-top negative of the same amount. http://stackoverflow.com/a/20477243/1004312

[mdo]

@cvrebert I don't want us to have to get into doing the research and support for any of those recommendations we make should one change or break or cause another bug in Bootstrap. We can have better callouts perhaps, but nothing that recommends a specific fix I think.

[barbalex]

@carasmo: Your solution works very nice in my case
@cvrebert: This nearly got me looking for a different solution for fixed navbars (if bootstrap weren't so great in other aspects). It is definitely not user friendly not to help your users find a solution to such a frequent problem. Or better: solve it.

[cvrebert]

@barbalex: You're preaching to the choir, but I'm not the one you gotta convince.

[barbalex]

@cvrebert: yep, sorry, got the wrong name, should have called @mdo I guess

[reedspool]

Found this thread on the way to my solution.

@carasmo's solution didn't work for me, because my layout proportions are already set.

Instead, I moved all my scroll-target id's to separate, empty, relatively positioned anchors, and use negative top's to fiddle with the scrollspy "breakpoint". I also had to set them to inline-block and give them width&height to make them ":visible" as noted in the BS3 Scrollspy docs.

Posted for posterity and in celebration of a working workaround ❕