title: Trying to change menu item text to an icon when active
body: <p>So this is my first question here. </p>
  
  <p>I have 5 menu items and 5 icons. I have coded them like this.</p>
  
  <pre><code>&lt;li class="nav-item"&gt;
  &lt;a class="nav-link currentactive" href=" index.html#getdemo"&gt;Get Demo&lt;/a&gt;
  &lt;a class="nav-link2" href="index.html#getdemo"&gt;&lt;img src="images/demo.png"&gt;&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>The code above is the first section. I have 5 sections on the page. It is a one-page website. Different menu items go to different sections on the page with #id.</p>
  
  <p>What I am trying to achieve here is, 
  SHOW TEXT on the menu items. And HIDE ICON (the second ) when not active.</p>
  
  <p>And when the menu item is active.
  HIDE TEXT on the menu item, and show the ICON (the image).</p>
  
  <p>Currently, the menu looks like this:
  <a href="https://i.stack.imgur.com/TSwAH.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TSwAH.jpg" alt="enter image description here"></a></p>
  
  <p>And I want to make it look like this:
  <a href="https://i.stack.imgur.com/OCazL.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OCazL.jpg" alt="enter image description here"></a></p>
  
  <p>And in case if you are wondering, how am I going to detect the active section on the page, I have already done that part using a JS found here. <a href="https://github.com/davist11/jQuery-One-Page-Nav" rel="nofollow noreferrer">https://github.com/davist11/jQuery-One-Page-Nav</a></p>
  
  <p>I think the solution to this is near to writing a script, 
  For when the menu item is active, show <strong>nav-link2</strong> and hide <strong>nav-link1</strong></p>
  
  <p>But i am very lost how to do it</p>