How To Make Active Navbar In HTML CSS And JavaScript

13 May 2023

12448

Hello.. everyone! In this blog, we will learn how to make active navbar in HTML CSS and Javascript.

Let’s dive into some web design awesomeness, active navigation links on scroll. This blog is all about breaking it down, why it’s cool, and how it makes web browsing epic.

What is an Active Navigation Link on Scroll?

Active navigation links on scroll are like the superheroes of web design. When you scroll down a webpage, the link light up or change to show which part of the page you’re reading. It is like a secret code that tells you where you are on the page.

Visual Clues

These links are like your trusty sidekicks, giving you instant feedback on where you are. You know, when you’re reading a long article or scrolling through a website, these links are there to guide you and keep you on track.

Making Browsing a Breeze

Imagine wandering through a maze without a map, pretty confusing,, right? Active navigation links are like a map for your web journey. They make it super easy to get around, and that’s what makes your browsing experience smooth.

Why Should You Care About Active Navigation Links?

Now that we know what they are, let’s talk about why they are such a big deal.

No More Getting Lost

Ever found yourself deep in a webpage and had no clue where you are? Active navigation links are like digital breadcrumbs, leading you back to the path. You won’t get lost, and that’s a big win.

Effortless Surfing

Imagine having to scroll, scroll, and scroll just to find a specific section. Not fun, right? Active navigation links save you from all that hassle. They make it easy to jump around and find what you want in a snap.

Super User Friendly

You want your web experience to be as smooth as butter, right? Well, active navigation links are here for that.. They make your life easier, help you explore content, and keep you engaged.

For Everyone

Web design isn’t just about looks, it’s about being inclusive. Active navigation links are a win for everyone, especially those who use screen readers or need extra help to navigate. They’re like digital signposts that guide everyone on their web journey.

How Do You Get Active Navigation Links in Action?

Now, let’s get into the nitty gritty of making active navigation links work on your website.

Setting the Stage with HTML

To make these links work, you gotta set up your HTML game. Each section of your webpage needs a special code name (id attribute) so the links know where to go.

Styling with CSS

It’s all about the looks, CSS (Cascading Style Sheets) helps you jazz up your active navigation links. You can change how they look when they’re active, like the color, background, or even adding some cool animations.

JavaScript Wizardry

JavaScript is the magic behind active navbar link. It’s like the wizard pulling the strings. It watches when you scroll and makes the links light up or change when you’re in a new section.

Smooth Scrolling Magic

For that extra dose of awesome, add smooth scrolling. Click a link, and your page glides down like it’s on a cloud. It’s like magic, and it makes your website look super slick.

Where You’ve Seen Them

Active navigation links are all over the web. Here are a couple of places you might have spotted them in action:

Single Page Websites

One page websites are, like, the kings of active navbar link. They use them to show where you are as you scroll through the whole page. It’s like a map of the website, right at your fingertips.

Long Articles

Ever read a super long article online?? Active navigation links are your best friend here. They let you jump to different sections, so you don’t have to scroll forever to find what you want. It’s like the article is working for you.

You Might Also Like This:

Video Tutorial:

Watch a video tutorial in this discussion “How to Create an Active Nav Link on Scroll using HTML CSS and Javascript – Active Menu Class”, see this video.

Source Files – Active Navbar Link

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navbar Active Link On Scroll HTML CSS JS | Codehal</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <a href="#" class="logo">ActiveLink.</a>
        <nav>
            <a href="#home" class="active">Home</a>
            <a href="#about">About</a>
            <a href="#services">Services</a>
            <a href="#portfolio">Portfolio</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>
    <section id="home">Home</section>
    <section id="about">About</section>
    <section id="services">Services</section>
    <section id="portfolio">Portfolio</section>
    <section id="contact">Contact</section>
    <script src="script.js"></script>
</body>
</html>

CSS Code:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: 'Poppins', sans-serif;
}
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 120px;
    background: #11141a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}
.logo {
    font-size: 25px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}
nav a {
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    margin-left: 35px;
    transition: .3s;
}
nav a:hover,
nav a.active {
    color: #0ef;
}
section {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #1f242d;
    font-size: 100px;
    color: #fff;
    font-weight: 700;
}
section:nth-child(odd) {
    background: #323946;
}

JavaScript Code:

let sections = document.querySelectorAll('section');
let navLinks = document.querySelectorAll('header nav a');
window.onscroll = () => {
    sections.forEach(sec => {
        let top = window.scrollY;
        let offset = sec.offsetTop - 150;
        let height = sec.offsetHeight;
        let id = sec.getAttribute('id');
        if(top >= offset && top < offset + height) {
            navLinks.forEach(links => {
                links.classList.remove('active');
                document.querySelector('header nav a[href*=' + id + ']').classList.add('active');
            });
        };
    });
};

Conclusion

Active class link or Active navigation links on scroll are like the sidekicks that make web browsing epic.. They give you feedback, make browsing a breeze, and keep you engaged. Whether you’re designing a one pager, a blog, or any website, think about adding active navigation links, they’ll level up your user experience and keep your visitors coming back for more.

Download Code