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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <title>Single Page Fixed Header Anchor Link</title> </head> <body> <div class="container"> <header class="fixed"> <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#about">About</a> </li> <li> <a href="#service">Service</a> </li> <li> <a href="#portfolio">Portfolio</a> </li> <li> <a href="#contact">Contact</a> </li> </ul> </header> <section class="section top-section">Home Section</section> <section class="section">About Section</section> <section class="section">Service Section</section> <section class="section">Portfolio Section</section> <section class="section">Contact Section</section> <footer> Footer </footer> </div> </body> </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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html> <head> <title>Single Page Fixed Header Anchor Link</title> </head> <body> <div class="container"> <header class="fixed"> <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#about">About</a> </li> <li> <a href="#service">Service</a> </li> <li> <a href="#portfolio">Portfolio</a> </li> <li> <a href="#contact">Contact</a> </li> </ul> </header> <span class="anchor" id="home"></span> <section class="section top-section">Home Section</section> <span class="anchor" id="about"></span> <section class="section">About Section</section> <span class="anchor" id="service"></span> <section class="section">Service Section</section> <span class="anchor" id="portfolio"></span> <section class="section">Portfolio Section</section> <span class="anchor" id="contact"></span> <section class="section">Contact Section</section> <footer> Footer </footer> </div> </body> </html> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
* { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 18px; margin: 0; padding: 0; } .container { margin: 0 auto; max-width: 960px; position: relative; overflow: hidden; } header { background: #76daff; width: 100%; max-width: 960px; height: 40px; } header ul { margin: 0; } header ul li { display: inline-block; padding: 10px 20px; } header ul li a { color: #343436; text-decoration: none; } .top-section { margin-top: 40px; } .section { margin-bottom: 40px; background: #eee; padding: 20px 20px 200px; } .fixed { position: fixed; } footer { background: #76daff; padding: 24px 20px 20px; } |
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
1 2 3 4 5 6 |
.anchor { display: block; height: 40px; /*same height as header*/ margin-top: -40px; /*same height as header*/ visibility: hidden; } |
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.