How to show external links as 'active' in the navigation

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:

<!-- You may use freely on Squarespace but do not publish ----->
<!-- Copyright Soundfocus Digital [www.sf.digital] ------------><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.

The infographics used on the thumbnail and banner for this article were created by freepik and used with permission.