Search code examples
javascriptandroidhtmlcssnav

How to change the color of navbar icon when the user is viewing a specific section of page

I have a nav bar that looks like this on android Navbar for android

with the following links if it was clicked

<a href="#body-heading" class="nav__link  nav__link--active">
<a href="#services" class="nav__link">
<a href="#images" class="nav__link">
<a href="#" class="nav__link">

so what I want is, if someone is viewing the element with id #services on android, I need the js or css to toggle the class nav__link--active from Home icon and add it to Services Icon. I want to do it to every icons in the nav icon. Is there any way to do this on js or css?

Solution

  • Here is the working solution for you

    <pre>
     https://codepen.io/lasjorg/pen/ZEQpKqy
</pre>