SquareSpace - How to change image in navigation bar when on it's linked URL

Question

I am having a bit of an issue getting this resolved.

I want to have images in my top navigation bar menu change to a different image when on that specific URL for the page.

example;-

HOME - PROCESS - GALLERY - CONTACT

^ when clicking on "PROCESS" it leads to the /process page ^

I want to get it so the "PROCESS" image changes from black to grey and all the others stay black, this will basically show the end user which page they are currently on -> "PROCESS"

My current site: https://alex-vreal.squarespace.com/

This may be quite simple but just having a frustrating time resolving it.

Please let me know how I can fix this and what you guys need from me.

Answer 1

You can do it with opacity.

You can create a function that adds a class called active to the li tag when you change pages on your website. Then that active class will have a small css.

Check this example below and tell me if it helps

$(document).ready(function() {
  $('.main-nav li a').click(function(e) {

    $('.main-nav li.active').removeClass('active');

    var $parent = $(this).parent();
    $parent.addClass('active');
    e.preventDefault();
  });
});

.active {
  opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="main-nav dropdown-hover">
  <ul data-content-field="navigation">
    <li class=" external-link active">
      <a href="#"><img src="http://i.imgur.com/vyvR99Q.png" width="67" height="25"></a>
    </li>
    <li class=" external-link">
      <a href="#"><img src="http://i.imgur.com/0V4d6mS.png" width="98" height="25"></a>
    </li>
    <li class=" external-link">
      <a href="#"><img src="http://i.imgur.com/Rb64lhm.png" width="96" height="25"></a>
    </li>
    <li class=" external-link">
      <a href="#"><img src="http://i.imgur.com/qoHh0d8.png" width="102" height="25"></a>
    </li>
  </ul>
</nav>

Answer 2

If you have HOME, PROCESS, GALLERY, CONTACT in list items li then use,

li:active {background-image: url(grey.jpg);}

Answer 3

why don't you just change the image URL in the code ?

Otherwise, there is many solutions to do so, using JS, or css, or even php but you need to be more specific about what you want to do.