This is something that stumped me for a long time. Using anchor links on the same page works fine, but if you want to link to an anchor on another page (external to the one where the original link is) you end up with your header being in the way. Quick CSS fix for that I found online and tweaked a little to make it easy for anyone to use.
/* CSS edit to fix for overlapping headers */
#AnchorName {
display: block;
position: relative;
top: -XXpx;
}In the CSS above, you will want to
- Replace the #AnchorName with the actual name of your anchor
- Replace -XXpx with the 2x the height of your header. So if your header is 100px high, then you will enter the code above as “top: -200px;”
**The number for TOP might have to be tweaked, but in general starting with 2x the height of your sticky header will move you in the right direction. Sometimes the number ends up being a little higher than that.
The easiest place to add this code is is Appearance >> Customize >> Additional CSS. That way it will be easy for you to find if/when you need to make edits in the future. Remember to save your changes and then view the front-end of your site and test things out before you say WOOP WOOP that another issue is solved!