Is there a way to make my navbar active and also keep hover effect?

Question

Hi im wondering how i can make my navbar also active so when im on my secton page for about for example. I want the red line to be under About and so on. How do i accomplish that?

I have been struggeling to make it active but cant do it and its the last thing and then im 100% satisfied with my page... well atleast for now... please help me would love all the help i can get.

 window.addEventListener('scroll', function(){ var header = document.querySelector('header'); header.classList.toggle('sticky', window.scrollY > 0); }); <!---Sticky navbar---->

 header ul { position: relative; display: flex; } header ul li { position: relative; list-style: none; } header ul li a { position: relative; display: inline-block; margin: 0 15px; color: white; text-decoration: none; } header.sticky ul li a{ color: black; } header ul li a::after{ content:''; width: 0; height: 3px; background: #ff004f; position: absolute; left: 0; bottom: -6px; transition: 0.5s; } header ul li a:hover::after{ width: 100%; }

 <header> <a href="#home" class="logo">MajorJammbaa</a> <div class="toggle" onclick="toggleMenu();"></div> <ul class="menu"> <li><a class="active" href="#home" onclick="toggleMenu();">Home</a></li> <li><a href="#about" onclick="toggleMenu();">About</a></li> <li><a href="#portfolio" onclick="toggleMenu();">Portfolio</a></li> <li><a href="#contact" onclick="toggleMenu();">Contact</a></li> </ul> </header> <!--Front page image and text--------------------------------------------------------------------------------------------------------------------------------------------------> <section class="landing-page" id="home">

Answer 1

You could create the function toggleMenu(element) which adds a class active to the given element and remembers it until the next call. When the function is called the next time it first checks if there is an active menu entry and deactivates it.

Consider the following code:

 window.addEventListener('scroll', function() { const header = document.querySelector('header'); header.classList.toggle('sticky', window.scrollY > 0); }); let elActiveAnchor = null; function toggleMenu(elAnchor) { elActiveAnchor?.classList.remove('active'); (elActiveAnchor = elAnchor).classList.add('active'); } toggleMenu(document.getElementById("home"));

 header ul { position: relative; display: flex; } header ul li { position: relative; list-style: none; } header ul li a { position: relative; display: inline-block; margin: 0 15px; color: gray; text-decoration: none; } header.sticky ul li a { color: black; } header ul li a::after { content:''; width: 0; height: 3px; background: #ff004f; position: absolute; left: 0; bottom: -6px; transition: 0.5s; } header ul li a:hover::after, /* This is the new selector for the "active" menu entry */ header ul li a.active::after { width: 100%; }

 <header> <a href="#home" class="logo">MajorJammbaa</a> <div class="toggle" onclick="toggleMenu();"></div> <ul class="menu"> <li><a id="home" href="#home" onclick="toggleMenu(this)">Home</a></li> <li><a href="#about" onclick="toggleMenu(this)">About</a></li> <li><a href="#portfolio" onclick="toggleMenu(this)">Portfolio</a></li> <li><a href="#contact" onclick="toggleMenu(this)">Contact</a></li> </ul> </header> <!-- Front page image and text --> <section class="landing-page" id="home">