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. 

Thanks,

Cecelia

Link to comment
  • Replies 2
  • Views 990
  • 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 {
   backgroud-color:rgb(254,64,230)!important;
}

and the body buttons working with this code:
 

.primary-button-style-solid .sqs-block-image .design-layout-card .image-button a:hover {
  background-color:rgb(254,64,230)!important;
}

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

 

Link to comment

Archived

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.