How to Highlight a Specific Navigation Link in Squarespace
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
From your Squarespace Dashboard, go to:
Pages → Custom code → Custom CSSScroll 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.
/* 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
/* 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
/* 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.
Frequently Asked Questions
-
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.”
-
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.
-
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.
-
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.
-
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.
