0

I have this page with a fixed nabber on top (using default bootstrap navbar).

The page holds a menu that includes links to different parts of the page using html anchors. The point is: the scrolling position is not perfect because I have this navbar occupying the first 50px of the page, so after clicking on the html link to anchor, the content is 50px hidden by the navbar.

What I want to do is: that the anchor link consider the first 50px to scroll it perfectly to the content.

Does anyone have an idea of how to fix it?

Siguza
  • 21,155
  • 6
  • 52
  • 89
Leandro Faria
  • 445
  • 2
  • 11
  • 25
  • It's worth posting a sample e.g. on [JSFiddle](http://jsfiddle.net/), so that you can demonstrate what the issue is instead of just describing it. – levant pied Nov 11 '14 at 13:47
  • 1
    Just give the targeted element a `margin-top` as high as the height of the navbar. – powerbuoy Nov 11 '14 at 14:02
  • Or you could hook some JS to this and set the offset manually there as well as making the scrolling smooth. – powerbuoy Nov 11 '14 at 18:42
  • Possible duplicate of [HTML position:fixed page header and in-page anchors](https://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors) – mlt Feb 02 '18 at 19:11

2 Answers2

0

You can either place a div that is 50px high over the content you want to scroll to, then anchor to that:

<a href="#link">Link</a>

<div id="link" style="height:50px;"></div>
<div class="content">
Content Here...
</div>

JSFiddle Demo

Or, give the content div a padding-top, or margin-top of the height of the nav bar:

<a href="#link">Link</a>
<div id="link" class="content">
    Content Here...
</div>

CSS:

.content{
    padding-top:50px;
}

JSFiddle Demo

Jacob G
  • 13,762
  • 3
  • 47
  • 67
  • While that's simple, it's a very ugly fix imo. Better just set margin-top: 50px on the element itself, or use a smooth JS-scroll where you can easily set an offset. – powerbuoy Nov 11 '14 at 13:59
0

With Twitter Bootstrap there is a necessity to provide additional spacing when the navbar is fixed.

enter image description here

Underneath(or after, you might say) you'll want to provide the additional spacing required to unsheath the covered content out of mystery and into usefulness.

further reading: http://getbootstrap.com/components/#navbar-fixed-top (they actually recommend a padding-top of 70px to the body element)

docodemore
  • 1,074
  • 9
  • 19
  • I'm pretty sure this won't offset the scroll position with in page links. You'd need to give the targeted element a margin-top for that. – powerbuoy Nov 11 '14 at 14:01
  • padding works just as well. However, I do think that margin-top seems more semantic! – docodemore Nov 11 '14 at 14:45
  • Yes, padding works, but not on `body`. It needs to be on the targeted element. The fix you're referring to in your answer is for a different problem (that when you scroll to the top of the page - the navbar will cover the top-most content). – powerbuoy Nov 11 '14 at 18:41
  • A simple test in chrome inspector proves padding works on body. – docodemore Nov 12 '14 at 15:04
  • 1
    No, it doesn't. Regardless of how much padding-top body has, when clicking an in page link, the page will scroll down exactly to the position of the targeted element. And that's exactly how it SHOULD work. If you want the page to scroll slightly ABOVE the targeted element, you need to make the targeted element taller (ie give IT some padding or margin top). – powerbuoy Nov 13 '14 at 11:23
  • BTW: I just tried this on a site I'm building right now. Gave body a 200px padding-top and created an in page link, of course clicking the link still brings you down to the targeted element - NOT 200px above it (and frankly, if it did that would be very confusing) – powerbuoy Nov 13 '14 at 11:24
  • It's simple, you add padding-top:50px; to body, and any fixed elements are above it. That is repeatable with ease. I'm not sure what we are arguing for. – docodemore Nov 13 '14 at 18:40
  • Here's a fiddle that proves padding-top in body does NOT offset the scroll position of in page links: http://jsfiddle.net/rvkyxnL3/ – powerbuoy Nov 14 '14 at 14:11
  • And here's one with padding-top on the targeted elements; http://jsfiddle.net/rvkyxnL3/1/ (which is the solution to this particular problem) – powerbuoy Nov 16 '14 at 18:27