Make active link bold in header nav on Squarespace
I love Squarespace. However, there are a few design choices that the platform has made that I don’t love.
One of these is how active links in header navigation bars are displayed. Natively on Squarespace your active page, aka the page a user is currently on, is shown with an underline in the header navigation menu.
Personally I don’t think this looks great. In fact, I don’t like using underlines anywhere on Squarespace websites. Instead, I want my active page links to appear bold. Luckily there is a simple piece of code that will do exactly that.
Watch the video
Check out the YouTube video below 👇
How to make an active link bold in header navigation on Squarespace
Head to your custom CSS panel and add in the following code:
.header-nav-item--active > a,
body:not(.header--menu-open) .header-nav-folder-item--active .header-nav-folder-item-content {
font-weight: 600 !important;
background-image: none !important;
}
The above code allows you to target each individual item listed in your folders. Therefore if you have a folder link to “services” which links to subpages “web design” and “web strategy” and “web design” is your active page, only “web design” will be bold, as opposed to all the folder links.
If you don’t have any folder links on your website, you can remove the middle lines of the code and instead just use:
.header-nav-item--active > a {
font-weight: 600 !important;
background-image: none !important;
}
📩 Join the inner circle to get exclusive code updates
You can play around with the pixls for the weight of the font depending on how bold you want the text to appear whilst setting the background to none removes the underline.
Hit save and your active links will now be displayed as bold.
If you found this tutorial useful be sure to check out the rest of the by Crawford Squarespace guides.
Your designer
I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.