0

I have a fixed header on my site and am trying to anchor to different sections on the page.

The page will scroll to the point where the anchored div is 0px from the top of the screen however, with a fixed header this means that half of the anchored div is now hidden behind it.

See this example:

#fixed{
  position:fixed;
  top:0px;
  background-color:#333;
}
div{
  width:100%;
  height:150px;
  border:1px solid #333;
}
nav{
  margin-top:150px;
}
<div id="fixed"></div>
<nav>
<a href="#1">1</a>
<a href="#2">2</a>
<a href="#3">3</a>
<a href="#4">4</a>
<a href="#5">5</a>
</nav>
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<div id="4">4</div>
<div id="5">5</div>

What I want to know is if there is a way to anchor to a point in pixels above the div I want to go to so that when you click on the link it will scroll to the point where that div is below the fixed header?

Paddy Hallihan
  • 1,624
  • 3
  • 27
  • 76
  • add padding-top to the body with a value equal to the height of the fixed header: body {padding-top: 150px;} – LFX Jul 12 '19 at 13:45

1 Answers1

1

edit: give each div a class then add the following css to this class:

.classname {
   padding-top: 150px;
   margin-top: -150px;
}
LFX
  • 125
  • 7
  • Hi thanks for your answer, unfortunately that won't work as it will still scroll to the part of the body that I want hiding the div behind the header – Paddy Hallihan Jul 12 '19 at 13:52