2

I have a sticky nav that takes up about 80px worth of space at the top of the browser window when it catches. Part of the navigation contains a jump-to-section nav that takes the user to a section on the page that correlates with the link in the nav (you know how this works).

The problem is once the user clicks a jump-to link, it sets the section at the top of the window which covers the name of the section with the sticky navigation, just abruptly showing a title-less piece of content.

Is there a way to offset the space taken up by the sticky nav so that the user can see the title of a section on nav click?

Ideally, this would be a CSS fix. Suggestions?

Ben Tinsley
  • 179
  • 1
  • 12

1 Answers1

1

Add padding-top: 80px; (the height of your nav) to the top of each section.

If this messes up your design, you can make it a margin, and then have a negative margin-bottom:-80px; at the bottom of the element above, to keep the design congruent.

Elijah Murray
  • 2,132
  • 5
  • 30
  • 43