Jump to content

Nav Action Button change link hover color (Bedford does not have this in design)

Recommended Posts

Site URL: http://www.traininglab.com.au


Appreciate help.  The Nav Button on Beford template is automatically displaying white text on yellow background for the hover font.  There is no option in Design to change the hover link font color only the a link color.  It is very hard to read the white on yellow background on the button hover.  I want the yellow color for the action button but need to change the text color to black font on the hover.  What is the CSS to do this on the Bedford template.  It is also really bad for accessibility too as can't be read.

It is strange if I change the Design Nav Button color to white it will have black automatically as the link hover color on the nav button but when I change it to the yellow it changes the link hover font to white.  

Thanks in advance. 




Screen Shot 2020-01-30 at 5.52.29 pm.png

Screen Shot 2020-01-30 at 5.52.34 pm.png

Screen Shot 2020-01-31 at 4.23.05 pm.png

Link to comment

Hi Corinne @CoriOz

Add this to Design > Custom CSS:

.nav-button-style-outline.enable-nav-button #headerNav nav>div:not(.folder):last-child a:hover {
  color: #181818;


Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.