Jump to content

Menu Block Buttons – CSS

Recommended Posts

Posted

I have used a menu block as a list of services and prices here: https://www.laurajane.co.nz/services

I used the following css to style the menu buttons, i.e. "Specials, Brows & Lashes, Skin"

.menu-block .menu-selector label.menu-select-labels--active {
   background-color: black !important;
   color: white;   text-decoration: none;
}

.menu-select-labels {  background-color: #f69c9d; color: black; font-size: 18px   !important; text-transform: uppercase; cursor: pointer;  padding: 12px 20px !important;   margin: 8px; }

It works perfectly while i'm in the Squarespace editor, and also when viewing the live page using the direct link https://www.laurajane.co.nz/services

However, when I start from the home page https://www.laurajane.co.nz then navigate to the Services page (top right nav bar), there is an issue, where the menu button colour doesn't change when it's clicked/active. 

 

The issue disappears once I refresh the page – but I can hardly expect visitors to do that!

 

Hope that makes sense. Anyone know why this is happening?

 

Thanks

 

Artboard 2.png

  • Replies 4
  • Views 2.2k
  • Created
  • Last Reply
Posted

I used the custom code:

.menu-block .menu-selector label.menu-select-labels--active {
   background-color: black !important;
   color: white;   text-decoration: none;
}

.menu-select-labels {  background-color: #f69c9d; color: black; font-size: 18px   !important; text-transform: uppercase; cursor: pointer;  padding: 12px 20px !important;   margin: 8px; }

 

Added in Design, Custom CSS.

 

  • 5 months later...
  • 9 months later...

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.