Change the Font Colour of One Link in Your Squarespace Menu Navigation

 
Change Font Color in Navigation Menu
 

You know how in the Bedford template, you can add a box or pill button around the final link in your navigation menu so it stands out and the visitor will be all, OK, I'm pushing that button!

If you aren't using Bedford, here's a simple HTML tweak to change the colour of a single link in your Squarespace Menu Navigation so that it also stands out. If you want it to.

Check it out.

 
Step 1 - Click on the gear icon of the page, index or folder that is part of your menu navigation.

Step 1 - Click on the gear icon of the page, index or folder that is part of your menu navigation.

Step 2 - Add the code: <font color="YOUR COLOUR CHOICE">Page Title</font>  Note: Use the American Spelling for the word color in the code.

Step 2 - Add the code: <font color="YOUR COLOUR CHOICE">Page Title</font>  Note: Use the American Spelling for the word color in the code.

 
 
Step 3 - You can also use hex color codes to stick to your brand color. Delete the code from the Page Title section. When you add the code to the navigation title, it automatically loads up in the Page Title, so you have to manually delete it.

Step 3 - You can also use hex color codes to stick to your brand color. Delete the code from the Page Title section. When you add the code to the navigation title, it automatically loads up in the Page Title, so you have to manually delete it.

Step 4 - Click Save after you've added the code. Test to see if the code works for you. You may have to refresh your page.  See how it stands out.

Step 4 - Click Save after you've added the code. Test to see if the code works for you. You may have to refresh your page.  See how it stands out.

 

I was playing around with code to see about adding a box or pill. This can be done using the above method in the page configuration; however, it isn't responsive. It doesn't look good on a tablet or mobile.  

To add a Bedford style box or pill, you will need to style it using custom CSS in the design section, so while not hard (if you know the code), it's not quite a simple tweak either. 

And we're all about simple over here!

Does it work for you?  Pop on over to my FB page to share a link and a screenshot. Would love to see how you use this tweak.

Kath O'Malley

Hi, I’m Kath - author of this blog post (and others like it) and copywriter, editor, keyword researcher and website setter upper for Squarespace web designers and service-based entrepreneurs and freelancers. Team up with me to get your web design projects done, like yesterday.