Offsetting in-page hyperlinks because of fixed navigation bar

Asked Aug 09 '13 at 12:26

Active Aug 09 '13 at 13:12

Viewed 71 times

 <ul>
   <li><a href="#idone">item 1</a></li>
   <li><a href="#idtwo">item 2</a></li>
   <li><a href="#idthree">item 3</a></li>
 </ul>

<section id="idone">
        <h3>Item 1</h3>
        <p>Subsection 1</p>
      </section>

      <section id="idtwo">
        <h3>Item 2</h3>
        <p>Subsection 2</p>
      </section>

      <section id="idthree">
        <h3>Item 3</h3>
        <p>Subsection 3</p>
</section>

Pretty much, i have some code like shown above, and when i click the link in the sub navigation i want it to jump to the section of text. It does that, but it seems because of a fixed navigation bar i have which is 41px the heading for the section of text is hidden, but i want that shown. If someone could show me how to offset the scrolling that would be great, thanks.

edited Aug 09 '13 at 13:12

putvande

15,068
3
34
50

asked Aug 09 '13 at 12:26

user2568418

How do you want to do this? Via JavaScript or CSS? – putvande Aug 09 '13 at 13:10
CSS preferably, incase they have JS disabled – user2568418 Aug 09 '13 at 13:12
1

You need to set some margin (same amount as the height of your navigation) on your section (or the container of it). – putvande Aug 09 '13 at 13:13
i tried putting section {margin-top:45px;} in css file, but it doesnt seem to be working – user2568418 Aug 09 '13 at 13:29
instead of margin, i used padding instead, that seems to have fixed that problem, thanks for your help – user2568418 Aug 09 '13 at 13:36
check out this one: [Fixed position navbar obscures anchors][1] [1]: http://stackoverflow.com/questions/9047703/fixed-position-navbar-obscures-anchors – Pete Aug 16 '13 at 13:14

Offsetting in-page hyperlinks because of fixed navigation bar

0 Answers0