Brine: How to show 'Links' as 'active' in the desktop navigation

active-navigation-banner.jpg

In the Brine family of templates, there are options to change the appearance of ‘active’ desktop navigation links to show that the visitor is currently visiting the page. There’s just one problem. It doesn’t work for ‘external’ links, that is, where you’ve added a link to your navigation.

Why is this an issue? Well, we often want to add a single category of products or a single category of blog posts to the navigation, and to do this we need to use a link, instead of just dragging the products or blog page to the navigation.

So can it be fixed? Yes, with a small section of code.

Add this JavaScript to Settings > Advanced > Code Injection > Footer:

<script>
window.Squarespace.onInitialize(Y, function(){
    var thisPage = window.location.href;
    var navLink = document.querySelector('.Header-nav-inner [href^="' + thisPage + '"]')
    if (navLink) {
      navLink.classList.add("Header-nav-item--active")
    }
});
</script>

Note that the code will only work if

  • you have configured your Squarespace website to use a Brine-family template

  • you have selected the ‘active’ navigation style in Site Styles

The code checks the URL of the current page. If it matches a link in the desktop navigation, it adds the active style to the first nav link that matches. The link will be styled just as the others, using the ‘active’ style derived from the settings in the Site Styles panel.