Home/ Questions/Q 8931003
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T09:00:53+00:00

Using bootstrap’s navbar , I am trying to figure out how to make it

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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: http://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.

    • 0