0

I have a header bar with many links that floats at the top of the page even when scrolled down. When I click on these links, it links to a place further down on the page. My problem is that when I click on the link, it links to the proper section, but because the bar is there, it covers part of the text I would like the user to see. For example, clicking on "About" brings me to the About section, but the top bar blocks the words about. Is there a way to pad each section when it is linked to by the top bar?

user1253952
  • 1,577
  • 8
  • 22
  • 34
  • have you tried adding a padding top to your sections? `section { padding-top: 30px; }` or whatever the padding is. You can check how it works here [twitter bootstrap base css](http://twitter.github.com/bootstrap/base-css.html#buttons). – ace Oct 26 '12 at 05:23

1 Answers1

0

Have a look at those SO questions:

offsetting an html anchor to adjust for fixed header
Sticky Header Covers Anchor Text

Some solutions:

http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo/

Community
  • 1
  • 1
roberkules
  • 6,557
  • 2
  • 44
  • 52