Here is my very first question on this platform.
I have 5 menu items and each has an associated icon. The code snippet for one of the menu items looks like this:
<li class="nav-item">
<a class="nav-link currentactive" href=" index.html#getdemo">Get Demo</a>
<a class="nav-link2" href="index.html#getdemo"><img src="images/demo.png"></a>
</li>
This code snippet corresponds to one section on a one-page website with different menu items linking to various sections using #id.
My goal here is to display text when the menu item is selected, and hide the corresponding icon. Conversely, when the menu item is inactive, I want to hide the text and show the icon.
Currently, the menu displays like this: https://i.sstatic.net/TSwAH.jpg
However, I would like it to look more like this: https://i.sstatic.net/OCazL.jpg
If you are curious about how I determine the active section on the page, I have already implemented a solution using JS from this source.
I believe the key to achieving what I want lies in writing a JavaScript script to toggle between showing nav-link2 and hiding nav-link1 when the menu item is active.
However, I am currently struggling with implementing this solution and feeling quite lost. Any guidance would be greatly appreciated.