How to Highlight a Specific Navigation Link in Squarespace

Squarespace Tutorial
Written By Walid Hasan

These days, your navigation menu does more than provide structure; it’s a useful guide to help visitors, highlight key pages, boost the overall user experience, and more. If you are using the Squarespace 7.1 template, I’m going to teach you how to make one of your top navigation links (such as “about” or “shop”) stand out using custom styling with CSS.

Why Highlight a Specific Navigation Link?

Whether you’re running a sale, promoting an event, or you’d just like to draw attention to a specific page, such as your Shop, Contact, or About page, highlighting a certain link increases clicks and highlights certain aspects of your branding.

What You’ll Need

  • A Squarespace 7.1 Site utilizing the Template

  • Custom CSS (access with Business or Commerce plan)

  • The page slug or link you want to highlight (e.g., about, shop, contact)

Step-by-Step Guide to Highlight a Navigation Link

Step 1: Go to Custom CSS

  1. From your Squarespace Dashboard, go to:
    Pages → Custom code → Custom CSS

  2. Scroll down to the code editor section.

Step 2: Add Custom CSS Code

Let’s say you want to highlight the "About" page in your top navigation. You can target it using its URL slug.

Copied!

/* Highlight "About" navigation link */
header nav a[href*="about"] {
  color: #E63946 !important; /* Red text */
  font-weight: bold;
  border-bottom: 2px solid #E63946; /* Add underline */
}
/* Optional: Add hover effect */
header nav a[href*="about"]:hover {
  color: #A31621 !important;
  border-color: #A31621;
}

✔ Replace "about" with your page slug if different, e.g., contact, shop, or services.

Design Variations

Here are a few other styles you can apply:

Example: Highlight with a Background

Copied!

/* Style "Shop" with a soft yellow background */
header nav a[href*="shop"] {
  background-color: #FDE68A;
  color: #000 !important;
  padding: 6px 12px !important;
  border-radius: 16px;
  font-weight: 600;
}

Example: Bold with a Pill Style

Copied!

/* Highlight "Contact" with a pill-shaped button */
header nav a[href*="contact"] {
  background: #DCFCE7;
  color: #065F46 !important;
  padding: 6px 16px !important;
  border-radius: 999px;
  font-weight: 700;
}

Pro Tips

  • Determine the slug: Look at your page's URL to find the appropriate keyword that goes into href*="...".

  • Inspect the nav: Right click on your nav and select “Inspect” to verify the structure.

  • Keep it cohesive: Try to have your highlight style match your brand’s color palette.

Final Thoughts

A tailored navigation menu is a tiny but mighty modification that can make a difference to your website’s usability and yield. So, with just a few lines of CSS, you will be able to get a good-looking, well-defined navigation link on your Squarespace 7.1 (template) site.

FAQ: Highlighting Navigation Links in Squarespace

1. How do I tell which page link I should be marking?

You'll need to find the part of the link (which is known as the slug) that follows the URL for the page you want to pinpoint. For example, if the URL of your About Page is yourwebsite. com/about, the slug is “about.”

2. Does this customization apply to both desktop and mobile menus?

Yes, in most cases. Squarespace applies the same styling to desktop and mobile menus, so your changes should always sync across both devices. Mobile menu designs from around how may differ little in details depending on the template you use, so it’s always better to look at the actual site on a phone after any changes.

3. Can I have more than one navigation link highlighted at once?

Absolutely! Feel free to repeat the process to style multiple links such as “Shop,” “Contact,” and “Services.” Just make sure that the highlights are consistent with your underlying branding.

4. Will customizing a navigation link affect my site’s SEO or performance?

No, highlighting a navigation link is a visual change only. It won’t change how your site performs or how search engines see your pages. It’s a safe way to improve user experience without affecting the technical aspects of your site.

5. Why can’t I see the changes after applying the custom style?

If the highlight isn’t showing, make sure:

  • You’re using the correct page slug

  • The page is published and added to the navigation menu

  • You added the customization in the right section under Pages → Custom Code → Custom CSS
     Sometimes your site may also cache styles temporarily, so refreshing the page or clearing your browser cache can help.