Fix anchor links hidden by top navigation

You can either manually insert anchors in articles or use a setting to auto-generate anchors for all headings in your articles to make it easier to send readers to exactly the section they need.

Depending on how your knowledge base theme has been adjusted, sometimes opening an anchor link may mean that the top navigation bar covers the header instead of scrolling perfectly to it.

If you run into this issue, try following the steps below to fix it:

If you're the top navigation overlap your content, try this:

  1. Go to Customize > Style (HTML & CSS).
  2. In the Customize HTML, CSS, and JS section, select Custom CSS.
  3. Copy the code below and paste it into the Custom CSS pane:
    /* Make sure 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 */
    }
  4. You can adjust the pixel amount listed for the scroll-padding-top based on the height of your top navigation. More pixels = more padding.
  5. Be sure to Save your changes once you're done.

Why 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.