Jump to content

Adding Hover Actions to Nav Bar in 7.1

Recommended Posts

I'm currently using the template Barbosa in 7.1. I want to add hover actions to the nav bar so that when you hover over the pages the nav text turns from gray to pink. I also want this to happen with the all of the buttons on the page. I have not changed any styling on the page besides adding the following custom CSS.

Working CSS:

a:hover {
    color: rgb(254,64,230);

a#site-title:hover {
   color: rgb(254,64,230);


This css works in changing the color of the title of the page and of the hyperlinks. I thought that the a would work for the nav bar as well but apparently not. 



Link to comment
  • Replies 2
  • Views 949
  • Created
  • Last Reply

I got the nav bar working with this code:

.tweak-transparent-header:not(.header--menu-open) .header-announcement-bar-wrapper .header-nav-wrapper a:hover {

and the body buttons working with this code:

.primary-button-style-solid .sqs-block-image .design-layout-card .image-button a:hover {

Just still trying to figure out the button in the header.


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.