This is just to help anyone else having similar issues. I had a navigation bar on my header that was set to be sticky and it works but, when navigating to anchors, the navigation bar would always cover up the top of the area to which I was linking. This made it look like the anchor was set too low. For example, it would cover the top part of headings, etc.
All the support here and everywhere else keeps referencing java solutions and complex CSS workarounds that I just could not get to work.
I ended up doing the following all via Cornerstone with no coding needed:
- Setup your anchors/section IDs as usual and link your menus.
- Now, go to the header editor and find the height of the row/container containing your navigation bar.
- Go back to your page/pages in question and find a row/column where you have you IDs set as an anchor or where you have an actual anchor specified.
- Set the top padding to the same value as the height in step 2. This will add a space the same size as your navigation bar thus ‘correcting’ the overlap issue. If you want a little extra padding, increase this number by x pixels.
- Set the top margin to the negative value of what you just specified for the padding. This will remove the space and make this look right again.
For example: Your navbar is 75px and you want 5px extra space under the bar before your content. Set the top padding of the row where your anchor is to 80px and then set the margin to -80px.
Now, your navbar shouldn’t overlap anything anymore and this will work on same-page links and external links as well as one-page navigation. Plus, you don’t have to monkey around with javascript or jquery.
Apologies to the support team if this is out of place or if you’d prefer a different solution. Please feel free to modify this post or delete it entirely. I just figured I might help someone else out who is as frustrated as I was looking for an easy answer.
