Easily Add a Prefix on a New Line to Navigation Items

In this tutorial, I’ll show you how to customize your Squarespace 7.1 header navigation. Here we will modify the navigation items so that a prefix appears on a new line above each item label. This generic example can be easily adapted for any type of content or branding message.

What This Code Does

The JavaScript snippet provided below waits for the page to load and then selects each navigation item. It then updates the content by adding a prefix along with an HTML line break (<br>) so that the prefix appears on a separate line above the main navigation text.

The JavaScript Code

Here’s the code with generic placeholder text to add to the Code Injection - Header:

<script>
document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll(".header-nav-item:nth-child(1) a")[0].innerHTML = "Prefix<br>Nav Item 1";
    document.querySelectorAll(".header-nav-item:nth-child(2) a")[0].innerHTML = "Prefix<br>Nav Item 2";
    document.querySelectorAll(".header-nav-item:nth-child(3) a")[0].innerHTML = "Prefix<br>Nav Item 3";
    document.querySelectorAll(".header-nav-item:nth-child(4) a")[0].innerHTML = "Prefix<br>Nav Item 4";
});
</script>

How It Works

1. Waiting for the Page to Load:
   The script begins by adding an event listener for DOMContentLoaded. This ensures the code runs only after the HTML document has fully loaded.

2. Selecting Navigation Items:
   The code uses document.querySelectorAll() to select the navigation items by their class name (.header-nav-item) and then picks the appropriate item using the :nth-child() selector. Each item’s anchor tag (<a>) is targeted.

3. Updating the Navigation Text:
   The innerHTML property is used to update the content. For example, the first navigation item is changed to display "Prefix" on the first line and "Nav Item 1" on the second line. The <br> tag is what creates the line break.

Implementing This in Squarespace 7.1

1. Access Your Site Settings:
   Log in to your Squarespace account and navigate to the page where you want to implement this header customization.

2. Add the Code:

   • Navigate to Design > Custom CSS & Code or the Code Injection section under Settings.

   • Paste the code into the Header or Footer section. Choose a location that ensures the script is loaded on every page that contains your header navigation.

   • Save your changes.

3. Test Your Changes:
   Refresh your website to verify that the header navigation items now display the prefix and the main label on separate lines.

Customisation Tips

1. Adjusting the Text:
   Replace "Prefix" and "Nav Item X" with your desired text to match your branding or website theme.

2. Selector Accuracy:
   Make sure the class name .header-nav-item matches your site’s HTML structure. If your Squarespace template uses a different class name for the navigation items, update the code accordingly.

3. Responsive Design:
   Always check how the changes look on various devices to ensure that the two-line format works well across desktops, tablets, and mobile devices.

Conclusion

This generic example provides a flexible starting point for customizing your Squarespace header navigation. You can easily adapt the code by changing the text or even adding additional elements if needed. Experiment with the layout to create a header that aligns perfectly with your design vision.