Space behind bootstrap navbar

Question

Using bootstrap's navbar , I am trying to figure out how to make it not to hide the top of the body section.

Actually, it is very well solved using what is recommended here:

Twitter Bootstrap - top nav bar blocking top content of the page

But there is still something that is not working: when you have a link like this:

<li><a href="#section1">Go to Section 1</a></li>
<li><a href="#section2">Go to Section 2</a></li>
<li><a href="#section3">Go to Section 3</a></li>
<li><a href="#section4">Go to Section 4</a></li>

And

<h4 id="Section 1">Section 1</h4>
<p>Content of Section 1</p>
<p><a href="#">Back to Top</a></p>

<h4 id="Section 2">Section 2</h4>
<p>Content of Section 2</p>
<p><a href="#">Back to Top</a></p>

<h4 id="Section 3">Section 3</h4>
<p>Content of Section 3</p>
<p><a href="#">Back to Top</a></p>

<h4 id="Section 4">Section 4</h4>
<p>Content of Section 4</p>
<p><a href="#">Back to Top</a></p>

In this case, when you click on, for example, Section 2 direct link (or shortcut), the page properly scrolls-down until the section 2, but it hides the beginning of it behind the bootstrap navbar.

Any clue about how can this be fixed?

Answer 1

Put some top padding on your <h4> 's to account for your navbar 's height. Ie put this in your CSS:

h4 {
  padding-top: 30px;
}

Of course, change 30px to you actual navbar height.

Answer 2

By adding the :target psuedo-selector to a linked CSS you can apply a defined padding to your selected link (as long as it displays in your browser as: www.example.com#link1).

I spent the last 2 hours trying to search the web trying to find Jquery or JS to apply padding to the target div and after modifying my Google search terms found this

There might be a way to fool proof this with older browsers, but for the time being, this makes me a happy camper.

Answer 3

I've had the same problem and haven't found a real solution, but just more workarounds (like the "padding-top" work-around itself, that seems very hackish to me). It looks like the topbar issue is still unsolved, people just hack around it somehow.

One non-invasive work-around that works for me (as good as it can) is to add the following JavaScript to the page (apart from the "padding-top" hack):

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

I found this in a comment to a bootstrap GitHub issue . However, the function isn't executed in all necessary occasions (eg when going to the same anchor again).

A more reliable work-around is moving the anchor positions using CSS relative positioning (found in this StackOverflow answer :

a.anchor{display: block; position: relative; top: -250px; visibility: hidden;}

However, this is more invasive because you have to give your anchors a class (to distinguish it from links). So you have to update all your anchor HTML code (which might not always be possible, eg when you are dealing with a rigid CMS that generates your anchors):

<a class="anchor" id="top"></a>