Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
JacquiLeigh

Menu Block Buttons – CSS

Question

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

Edited by JacquiLeigh

Share this post


Link to post

3 answers to this question

Recommended Posts

  • 1

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.

 

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...