Navigation bars are essential components of websites. A sticky navigation bar remains visible at the top of the page even when the user scrolls down. This helps users easily access navigation links without having to scroll back to the top. Adding smooth scrolling enhances the user experience by providing a gradual transition when navigating to different sections instead of a sudden jump.
This tutorial will guide you through building a sticky navigation bar with smooth scrolling purely using HTML and CSS. No JavaScript is required.
Why Use a Sticky Navigation Bar?
Sticky navigation bars improve usability on longer pages. They keep the menu visible, allowing quick navigation and improving the overall user experience. Combined with smooth scrolling, the page feels more polished and professional.
Step 1: HTML Structure
First, we create a simple HTML page with a header containing the navigation bar and several content sections. Each link in the navigation will point to a corresponding section on the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Sticky Navigation with Smooth Scrolling</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header class="navbar">
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="home">
<h1>Welcome to Our Website</h1>
<p>This is the home section of the page.</p>
</section>
<section id="about">
<h1>About Us</h1>
<p>Details about our company and values.</p>
</section>
<section id="services">
<h1>Our Services</h1>
<p>Information about the services we offer.</p>
</section>
<section id="contact">
<h1>Contact Us</h1>
<p>Get in touch via email or phone.</p>
</section>
</body>
</html>
Each <section> has a unique id that corresponds to the href attribute in the navigation links. This allows users to jump to specific parts of the page.
Step 2: CSS Styling
Now, we add CSS to style the page, make the navigation bar sticky, and enable smooth scrolling behavior.
/* Basic Reset and Styling */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
scroll-behavior: smooth;
}
/* Navigation Bar Styles */
.navbar {
position: sticky;
top: 0;
background-color: #333;
padding: 15px 0;
z-index: 1000;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
/* Navigation Menu */
.navbar nav ul {
list-style: none;
display: flex;
justify-content: center;
}
.navbar nav ul li {
margin: 0 20px;
}
.navbar nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
padding: 8px 12px;
transition: background-color 0.3s;
}
.navbar nav ul li a:hover {
background-color: #575757;
border-radius: 4px;
}
/* Section Styles */
section {
padding: 100px 20px;
min-height: 100vh;
border-bottom: 1px solid #ddd;
}
section h1 {
margin-bottom: 15px;
color: #333;
}
section p {
max-width: 600px;
color: #555;
}
Explanation of Key CSS Properties
position: stickyon.navbarmakes the navigation bar stick to the top of the viewport when you scroll past it.top: 0ensures the navbar sticks to the very top.z-index: 1000ensures the navbar stays above other elements.scroll-behavior: smoothon thebodyapplies smooth scrolling for all anchor link jumps.- The navigation links have padding and hover effects to improve usability and appearance.
- Each section has enough padding and height so that content is spaced out and scrolling makes sense visually.
How to Test
Save the HTML and CSS in separate files (index.html and styles.css) and open the HTML file in any modern browser. Scroll down the page, and you will see the navigation bar stays visible at the top. Click on any navigation link, and the page will smoothly scroll to the corresponding section.
Try resizing the window or testing on mobile devices to confirm responsiveness and usability.
Final Thoughts
Using only HTML and CSS, you can create a professional sticky navigation bar combined with smooth scrolling behavior that greatly improves user experience on your website. This technique is widely supported on modern browsers and requires no additional JavaScript.
Feel free to customize the colors, spacing, and fonts to match your branding and design preferences. You can also add more navigation items or sections to fit your content.
Once you master this, you can explore other layout enhancements like responsive menus or animated scroll indicators for even better interaction.