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
  • Replies 2
  • Created
  • Last Reply

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;


About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment


This topic is now archived and is closed to further replies.

  • 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.