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 👇
Want a framework for designing the perfect homepage?
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;
}
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.
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
