A common issue with clicking on an anchor links to navigate on the same page or to an anchor on a different page is that the top navigation bar can cover part of the content (usually the header or the exact spot that the anchor is tied to).
While we used to suggest a CSS solution or a JS solution, we've found a single CSS solution that seems to work quite well; it basically just helps enforce whatever the height of your top navigation is.
If you're the top navigation overlap your content, try this:
- Go to Settings > Style.
- Below the Preview Pane, be sure Custom CSS is selected
- Copy the code below and paste it into the Custom CSS pane.
/* Make sure that the top navigation never overlaps content when an anchor is clicked */ body, html { scroll-padding-top: 55px; /* adjust the pixel amount here for your top navigation bar height */ } - You can adjust the pixel amount listed for the scroll-padding-top based on the height of your top navigation. More pixels = more padding.
- Be sure to Save your changes once you're done.
Why do we use both body and html? In our testing, body seems to work better with Chrome and html seems to work better with other browsers, so using it on both seems to cover all your browser bases.
