When building a landing page with a fixed header containing navigation links, you may notice that clicking on those links causes the section you’re jumping to get hidden behind the header. This is a common issue, especially when using “Home,” “About Us,” “Blog,” and “Contact Us” navigation menus.
Fortunately, CSS provides a neat solution to this issue with the scroll-margin-top
property. In this blog, we’ll explore how you can apply scroll-margin-top
to ensure that each section is properly aligned beneath your fixed header.
The Problem: Fixed Headers and Hidden Sections
Imagine you have a landing page with a fixed navigation header. Each section is accessible via anchor links, so clicking “About Us” smoothly scrolls down to the “About Us” section. The problem arises when the section’s heading or content is covered by the fixed header, leading to a poor user experience.
Example:
See the Pen The Problem: Fixed Headers and Hidden Sections by Sunil Pradhan (@Sunil_Pradhan) on CodePen.
The Solution: scroll-margin-top
scroll-margin-top
allows you to adjust the scroll position when an element is scrolled into view. By setting a margin at the top of the section, you can offset the height of the fixed header, ensuring the section content remains visible.
Example Scenario:
Let’s build a landing page with four sections: “Home,” “About Us,” “Blog,” and “Contact Us.” We’ll use a fixed header and anchor links that scroll smoothly to these sections.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <header class="navbar"> <nav> <a href="#home">Home</a> <a href="#about">About Us</a> <a href="#blog">Blog</a> <a href="#contact">Contact Us</a> </nav> </header> <main> <section id="home"> <h2>Home</h2> <p>Welcome to our homepage...</p> </section> <section id="about"> <h2>About Us</h2> <p>Learn more about us...</p> </section> <section id="blog"> <h2>Blog</h2> <p>Read our latest posts...</p> </section> <section id="contact"> <h2>Contact Us</h2> <p>Get in touch with us...</p> </section> </main> </body> </html>
Adding Fixed Header with CSS
.navbar { position: fixed; top: 0; left: 0; width: 100%; background-color: #333; padding: 10px; height: 65px; display: flex; align-items: center; } .navbar nav a { color: white; margin: 0 15px; text-decoration: none; } main { margin-top: 100px; section { padding: 30px 20px; }
Here, we’re setting the position: fixed
on the .navbar
, which keeps the navigation bar pinned at the top of the screen. We’ve also added margin-top: 100px;
to the main
content to prevent it from being overlapped by the header.
Applying scroll-margin-top
Now comes the magic! We can add scroll-margin-top
to each section to ensure it is properly positioned when scrolled into view.
section { scroll-margin-top: 100px; }
This will make sure that every section appears 100px below the top of the viewport, even when the header is covering the top of the page.
Full CSS Example
.navbar { position: fixed; top: 0; left: 0; width: 100%; background-color: #333; padding: 10px; height: 65px; display: flex; align-items: center; } .navbar nav a { color: white; margin: 0 15px; text-decoration: none; } main { margin-top: 100px; } section { padding: 30px 20px; scroll-margin-top: 100px; }
Output:
See the Pen The Solution: Fixed Headers and Hidden Sections by Sunil Pradhan (@Sunil_Pradhan) on CodePen.
Demo of the Effect
As you click the “Home,” “About Us,” “Blog,” or “Contact Us” links in the fixed header, the browser smoothly scrolls to the appropriate section.
Thanks to the scroll-margin-top property, each section aligns perfectly beneath the header, without being hidden behind it.
Conclusion
The scroll-margin-top
CSS property is a simple yet powerful tool that enhances user experience when navigating landing pages with fixed headers. It ensures that the content isn’t obscured by a sticky header and provides a clean, professional look to your page.
With just a few lines of CSS, you can solve one of the most common problems in web design. So the next time you build a landing page with anchor links and a fixed header, make sure to add scroll-margin-top
to your sections!
For more details, visit W3Schools scroll-margin-top page.
Add comment