Single Page Fixed Header Overlaps Anchor Sections

Nowadays the long web pages trend is growing day by day. Many sections can contain here and a navigation can handle to jump on desire section. A common issue is raised by fixed header when we jump into a different section within a long web page. Section content is covered by the fixed header.

You can find some solutions that are in Javascript or jQuery. Today we are going to show you how to solve this annoying issue through pure CSS and HTML. Don’t have to write a single line of Javascript or jQuery. This solution is worked amazingly perfect and too easy to implement.

Let’s have a look at our HTML structure which occurs this issue. In our landing page, we have a header that is fixed and contains a navigation bar. And some sections laying down the header position.

HTML

A simple layout structure of our landing pages. Our goal is to navigate each section through click the navigation anchor. You may notice that we adding an ID to each section which is similar to our navigation anchor href attributes. By clicking the navigation anchor the page can jump to the right section.

Now we see that when we jump to our desire section, some of the contents of the section would get covered by the fixed header.

That’s the actual problem, most developers face it several times and this is really annoying. No worries, some minor HTML adjustment can reduce your pain forever. You need some CSS adjustment according to your adjusted HTML.

Adjustment of Fixed Header

Just removed the ID from all the section tag and added an empty element wrapped with a non-blocking span tag beginning of each section. In span tag, just add a class called anchor and assign an ID to each which is similar to the navigation href attribute.

HTML

CSS

Previously we point each section to the section tag, and now we change the anchor point to adding a span elements. And the height and top margin of this element will be based on the height of the header.

Now we need to adjust some CSS for this newly added span element. We already assign a class called anchor.

CSS

Result

See the Pen Single Page Fixed Header Anchor Link by Pavel (@bdpavel) on CodePen.0

We set the height and top margin of this element which is similar to the header height. After adding this simple adjustment, the web page is jumped to the correct position of each section without covering any content.