Step 01: Understanding the Sticky Navigation Bar
A sticky navbar "sticks" to the top of the viewport (the visible portion of a webpage) when the user scrolls past it. It can enhance both the aesthetics and usability of your website by ensuring that the navigation options are always available.
Step 02: Setting up the HTML structure
Let’s start with a simple HTML structure for the navigation bar. This will include a nav element containing links to different sections of the page.
The <header> contains the navigation bar.
✲ index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Navbar | Coding Zemigle</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Navigation Bar -->
<div class="navbar">
<div class="logo">
<h2>Coding Zemigle</h2>
</div>
<ul class="nav-links" id="nav-links">
<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>
<div class="burger" id="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
<!-- Content Sections -->
<div class="content" id="home">
<h1>Welcome to Coding Zemigle</h1>
<p>This is the home section. Here, you can introduce your brand or business.</p>
</div>
<div class="content" id="about">
<h1>About Us</h1>
<p>Your go-to platform for web development tutorials, guides, and more.</p>
</div>
<div class="content" id="services">
<h1>Our Services</h1>
<p>We offer a range of services, including web development, design, and digital consulting.</p>
</div>
<div class="content" id="contact">
<h1>Contact Us</h1>
<p>Feel free to reach out to us through our contact page or social media for any inquiries.</p>
</div>
<script src="main.js"></script>
</body>
</html>The <header> contains the navigation bar.
The <nav> element has a class of navbar and an ID of navbar.
Inside the navbar, we have a logo and an unordered list of navigation links.
Step 03: Styling the Navigation Bar
Next, we will style the navigation bar to make it visually appealing and functional. Create a styles.css file and add the following CSS:
The .navbar class styles the navigation bar, giving it a dark background and white text.
✲ style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Verdana", sans-serif;
line-height: 1.6;
scroll-behavior: smooth;
background-color: #f0f0f0;
}
/* Navigation Bar */
.navbar {
position: sticky;
top: 0;
background-color: #1B998B;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
z-index: 1000;
width: 100%;
}
.logo h2 {
color: white;
font-size: 16px;
}
.nav-links {
list-style-type: none;
display: flex;
}
.nav-links li {
margin-left: 30px;
}
.nav-links li a {
color: white;
text-decoration: none;
font-size: 18px;
}
.nav-links li a:hover {
color: #1B998B;
}
/* Burger Icon */
.burger {
display: none;
cursor: pointer;
flex-direction: column;
justify-content: space-between;
height: 16px;
}
.burger div {
width: 20px;
height: 2px;
background-color: white;
transition: all 0.3s ease;
}
/* Responsive Breakpoints */
@media (max-width: 768px) {
.nav-links {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100%;
background-color: rgba(51, 51, 51, 0.9);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transform: translateY(-100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
margin: 20px 0;
}
.nav-links li a {
font-size: 24px;
color: white;
}
.nav-links.active {
transform: translateY(0%);
}
.burger {
display: flex;
}
.burger.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.burger.toggle .line2 {
opacity: 0;
}
.burger.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
}
/* Content Sections */
.content {
padding: 6rem 2rem;
height: auto;
background-color: white;
margin: 20px 0;
text-align: center;
}
.content h1 {
font-size: 22px;
margin-bottom: 20px;
}
.content p {
font-size: 16px;
color: #555;
}
.content:nth-child(even) {
background-color: #f4f4f4;
}The .navbar class styles the navigation bar, giving it a dark background and white text.
Flexbox is used for layout, ensuring that the logo and navigation links are properly aligned.
The .sticky class changes the navbar’s position to fixed and adjusts its background color.
Step 04: Adding Sticky Behavior with JavaScript
Now, let's implement the sticky behavior using JavaScript. Create a script.js file and add the following code:
We retrieve the navbar element and its offset position using offsetTop.
✲ script.js
// JavaScript for Burger Menu Toggle
const burger = document.getElementById('burger');
const navLinks = document.getElementById('nav-links');
burger.addEventListener('click', () => {
navLinks.classList.toggle('active');
burger.classList.toggle('toggle');
});We retrieve the navbar element and its offset position using offsetTop.
The handleScroll function checks the current scroll position against the navbar's offset. If the page has been scrolled beyond this point, the sticky class is added; otherwise, it is removed.
The handleScroll function is executed whenever the user scrolls the page.
Conclusion
Creating a sticky navigation bar using HTML, CSS, and JavaScript is a straightforward process that significantly enhances user experience on your website. The combination of these technologies allows for a flexible and responsive navigation solution that adapts as users interact with your site.
A sticky navigation bar improves accessibility and usability. CSS Flexbox is useful for creating responsive layouts. JavaScript allows for dynamic behavior, enhancing user interaction. Feel free to customize the styles and functionality to suit your website's needs!