0

I have the problem, that I have a header with position:fixed. On the page I want to use normal HTML Links or Anchors. If I click on one of the links, the screen jumps to this anchor, but it is at the top of the browser window. So the header is above the anchor and I am missing 100px of my content an have to scroll up, to come to the actual anchor.

Does anyone know a solution for this?

Rahil Wazir
  • 10,007
  • 11
  • 42
  • 64
Krbch
  • 33
  • 1
  • 2
  • 12

1 Answers1

0

You have 2 things going on here. Not only do you have a margin/padding issue with your content and header-height, but you'll need to make a buffer div above your sections so that the hash doesn't go all the way to the top.

Also, you should keep in mind, that at the time of writing, most touch devices can't deal with

position: fixed;

Take a look at this code for the header: http://codepen.io/sheriffderek/pen/qKLIo And look at this for the hash links: http://css-tricks.com/hash-tag-links-padding/

Good luck!

sheriffderek
  • 8,848
  • 6
  • 43
  • 70