Rewritten title: Highlight navigation menu links based on domain name instead of path, except for one page

Question

I have two navigation links in the menu at the top of my Shopify site. Menus are created/edited in admin navigation settings. I need the menu link for #1 to remain highlighted on every page of the site except on page #2.

The liquid looks like this:

<span class="inline-menu">
{% for link in linklists[section.settings.menu].links %}
<a class="inline-menu__link" href="{{ link.url }}">{{ link.title }}</a>
{% endfor %}
</span>

Then the html is rendered as follows:

<span class="inline-menu">
<a class="inline-menu__link" href="/">Pure Luxury Beauty</a>
<a class="inline-menu__link" href="/pages/pl-pro">PL Pro</a>
</span>

This javascript gets me partially there, but if I navigate away from the home page, I lose the "current" class.

$(function() {
  $("a").each(function() {
    if ($(this).prop("href") == window.location.href) {
      $(this).addClass("current");
    }
  });
});

I'm looking for a way to keep the "current" class on the first link on every page of the site and then only switch to the second link when on that page.

Answer 1

if (window.location.href == 'https://yourdomain.com/pages/pl-pro')
{
    $('#l1').removeClass ('current');
    $('#l2').addClass ('current');
}

.current
{
  background-color: green;
}

Pure Luxury Beauty
PL Pro