0

I use anchors a lot throughout my site. I now have a 60px navigation bar that runs across the top of the page thats using absolute positioning so there's no impact on anchors.

If I change that positioning to fixed - the bar will of course stay at the top of the screen but when someone clicks on an anchor there will be a little bit that's obscured by the black fixed bar at the top of the screen.

I've tried using this CSS however that seems to solve this by pushing down the text (including the anchors heading) and it seems to be OK:

a[name] {
    display: inline-block;
    margin-bottom: 60px;
}

Can anyone think of any gotchas that I haven't thought about?

Richard
  • 4,809
  • 3
  • 27
  • 46
  • Related - https://stackoverflow.com/questions/9047703/fixed-position-navbar-obscures-anchors?rq=1 – Paulie_D Aug 14 '18 at 11:03
  • When you have a fixed div (such as header fixed to the top of the page) then that element will be removed from the page flow - as such, as you have mentioned - the elements will now sit under it since it is no longer taking up space in the page. Best way to get around this (rather than altering the elements in the page) is to apply padding-top to the body that is equal to the height of the header (so if your header is 100px, apply body {padding-top: 100px;} and all your elements will now be in the place they were originally and not be obscured by the fixed element. – gavgrif Aug 14 '18 at 11:09

0 Answers0