Navbar hides initial content when jumping to in-page anchor #1768

sathomasga · 2012-02-06T15:19:32Z

If the navbar's position is fixed (e.g. > 980px screen width), then jumping to a in-page anchor link places the initial content for that anchor under the navbar where it is, therefore, hidden from the user.

henrik · 2012-02-07T19:45:34Z

I believe the docs say to do

body {
  padding-top: 40px;
}

if you use a .navbar-fixed-top, for this reason.

mdo · 2012-02-10T16:25:58Z

The only, slightly automated, way around this is more javascript and I don't want that just yet. For now, you'll need to calculate your own offset or at the very least add the right amount of padding for key elements.

8wgremlin · 2012-06-06T02:18:40Z

I have a similar issue. I have a table where each tr has an Id specific to that row.
When I have an anchor call to the table row it disappears under the navbar and subnav bar.
I've tried adding padding to the body as suggested, and margins as well, but to no avail.
Anyone have any thoughts on this.

henrik · 2012-06-06T13:58:24Z

Oh, I misunderstood the problem. Setting a padding on the body only means that the bar doesn't hide the content at the top of the (unscrolled) page. Once you scroll (jump to an anchor), the padding won't help you.

You could solve it with JS, something like:

window.addEventListener("hashchange", function() { scrollBy(0, -50) })

That code's quick-and-dirty – I think hashchange event support might be spotty – but it should give you the general idea.

derekdata · 2012-06-24T03:45:58Z

The javascript works.... if and only if it is registered before the page loads. In a situation where someone is loading with a hash, it does not work - what's the solution for this?

derekdata · 2012-06-24T03:49:50Z

This may be of interest to all: http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo/

henrik · 2012-06-24T08:39:42Z

@deezer To handle hashes when the page loads, you could do:

var shiftWindow = function() { scrollBy(0, -50) };
if (location.hash) shiftWindow();
window.addEventListener("hashchange", shiftWindow);

spilliton · 2012-07-02T03:58:37Z

Had same issue, above js code worked great. Thanks!

jay-w-opus · 2012-07-18T03:25:20Z

Tried different ways to solve this. The JS way looks the easiest. Thanks!

josegrad · 2012-10-25T20:52:35Z

This seems to work without any js:

http://stackoverflow.com/questions/9047703/fixed-position-navbar-obscures-anchors

<a name="myanchor">
    <h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1>
</a>

vincentmac · 2012-11-03T01:11:00Z

Just ran into this issue. The JS code worked well for me.

vitorbrandao · 2013-01-20T04:20:41Z

Thank you @henrik. That JS works flawlessly.

rpedela · 2013-02-08T19:24:18Z

@henrik That worked for me as well, but I wanted to show a more complete example. The code did not work for me in Firefox unless I had the below ordering.

...
<head>
  <script>
    var shiftWindow = function() { scrollBy(0, -50) };
    window.addEventListener("hashchange", shiftWindow);
    function load() { if (window.location.hash) shiftWindow(); }
  </script>
</head>
<body onload="load()">
...

Hansaplast · 2013-02-17T17:37:08Z

Works like a charm, thanks rpedela for the hint where to put it :-)

lrobeson · 2013-03-25T22:02:48Z

I'm also having this issue but wanted to avoid adding more JS so I created an ".anchor" CSS class and added the padding-top and margin-top styles as josegrad suggested. I only have anchor tags in 2 places so it's no big deal to add a few classes. It's working great, thanks for everyone's input.

jay-w-opus · 2013-03-25T22:28:23Z

The margin-top padding-top method has a flaw:
If there is a link on the section above the .anchor, you will not get :hover effect working correctly unless you hover the text because the .anchor section will cover it also the overlap is transparent.

http://jsfiddle.net/f8VhL/

superphly · 2013-05-08T17:07:51Z

The JS works for me, until I click on the link a second time a second after clicking the first. That action hides the anchor under the nav bar.

reggi · 2013-05-24T20:46:30Z

I really like @josegrad 's solution

JoshClose · 2013-06-16T05:19:56Z

I found a different solution that seems to work in both cases. It will scroll to the correct spot, and the selected menu item is correct also.

Basically you need to set padding-top: 40px; on the anchor, but you also need to set margin-bottom: -40px on the previous element to the anchor.

You can do this with JS by grabbing all the elements that are anchor in the menu and applying the styling to them and their previous sibling.

$("header .nav a[href!=#]").each(function(){
    $($(this).attr("href")).css("padding-top", "40px").prev().css("margin-bottom", "-40px");
});

sensomatic · 2013-07-25T04:37:36Z

@henrik @rpedela The javascript didn't work for me on Safari 6 on OS X. Did work in Chrome though.
Instead I went with this sort of business because if you pad on an inline element that has content it can obscure anything actionable above it like links. Note the empty span in the code below to avoid that.
@josegrad and @lrobeson may be interested in this too.

<span style="padding-top: 50px;" id="cite_note-1"></span>
<a href="#cite_ref-1">^</a>

igorkosta · 2014-06-05T09:27:32Z

Thank you very much @josegrad!

mnot · 2014-06-19T03:03:03Z

FWIW this worked best for me:

*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; 
  height: 75px; 
  visibility: hidden; 
}

BauweBijl · 2014-07-12T19:44:32Z

Thank you @mnot ... works best for me too!

oyvindhellenes · 2014-07-24T19:16:54Z

@mnot Great solution! Thanks.

@keynote2k

@keynote2k was the first to point out that the in-page anchor links in the Guide failed to function properly, due to Bootstrap's fixed navbar. This mixed solution of CSS and Javascript is the best solution I've been able to come up with for the problem. The CSS solution is obviously preferable, and is used herein for those anchor id attributes in the Guide that have no href of their own. Due to problems with using a pure CSS solution where the anchor includes both an href and a id attribute. The Javascript solution is specific for those cases. I took care not to have them both happen at once, as they would undoubtedly conflict. I did a inordinate amount of research about this issue. Bootstrap's own page about the fixed navbar: http://getbootstrap.com/examples/navbar-fixed-top/ doesn't discuss this issue at all, but there is a bug in Booststrap's bugtracker: twbs/bootstrap#1768 which discusses the issue. (However, I don't understand why that bug is closed, since none of the solutions I implement herein truly solve it). The most useful page I found regarding this issue is this one: http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo which offers several pure CCS solutions (each with drawbacks and advantages). Unfortunately, none of those solutions consider the question of anchor links that have both href and id attributes, and none of them work properly in that situation.

twbs/bootstrap#1768

mdo closed this as completed Feb 10, 2012

cvrebert mentioned this issue Apr 1, 2013

Scroll to element should adjust for fixed top navbars height #7444

Closed

flymo mentioned this issue Oct 8, 2013

NAV Bar fixed to top and the requirement for padding on H1/H2 tags #10976

Closed

pmanko mentioned this issue Nov 16, 2013

Fix affix and scrollspy behavior on profile page. pmanko/pi#7

Open

pierre-rouanet mentioned this issue Feb 6, 2014

Navbar hides initial content when jumping to in-page anchor tell-k/sphinxjp.themes.basicstrap#8

Merged

cvrebert added js labels Apr 20, 2014

twbs locked and limited conversation to collaborators Jul 24, 2014

misaugstad pushed a commit to ProjectSidewalk/SidewalkWebpage that referenced this issue Jun 25, 2018

Added Comment where I found a fix

0978f9d

twbs/bootstrap#1768

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Navbar hides initial content when jumping to in-page anchor #1768

Navbar hides initial content when jumping to in-page anchor #1768

sathomasga commented Feb 6, 2012

henrik commented Feb 7, 2012

mdo commented Feb 10, 2012

8wgremlin commented Jun 6, 2012

henrik commented Jun 6, 2012

derekdata commented Jun 24, 2012

derekdata commented Jun 24, 2012

henrik commented Jun 24, 2012

spilliton commented Jul 2, 2012

jay-w-opus commented Jul 18, 2012

josegrad commented Oct 25, 2012

vincentmac commented Nov 3, 2012

vitorbrandao commented Jan 20, 2013

rpedela commented Feb 8, 2013

Hansaplast commented Feb 17, 2013

lrobeson commented Mar 25, 2013

jay-w-opus commented Mar 25, 2013

superphly commented May 8, 2013

reggi commented May 24, 2013

JoshClose commented Jun 16, 2013

sensomatic commented Jul 25, 2013

igorkosta commented Jun 5, 2014

mnot commented Jun 19, 2014

BauweBijl commented Jul 12, 2014

oyvindhellenes commented Jul 24, 2014

Navbar hides initial content when jumping to in-page anchor #1768

Navbar hides initial content when jumping to in-page anchor #1768

Comments

sathomasga commented Feb 6, 2012

henrik commented Feb 7, 2012

mdo commented Feb 10, 2012

8wgremlin commented Jun 6, 2012

henrik commented Jun 6, 2012

derekdata commented Jun 24, 2012

derekdata commented Jun 24, 2012

henrik commented Jun 24, 2012

spilliton commented Jul 2, 2012

jay-w-opus commented Jul 18, 2012

josegrad commented Oct 25, 2012

vincentmac commented Nov 3, 2012

vitorbrandao commented Jan 20, 2013

rpedela commented Feb 8, 2013

Hansaplast commented Feb 17, 2013

lrobeson commented Mar 25, 2013

jay-w-opus commented Mar 25, 2013

superphly commented May 8, 2013

reggi commented May 24, 2013

JoshClose commented Jun 16, 2013

sensomatic commented Jul 25, 2013

igorkosta commented Jun 5, 2014

mnot commented Jun 19, 2014

BauweBijl commented Jul 12, 2014

oyvindhellenes commented Jul 24, 2014