Menu Block Buttons – CSS

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

Did you use custom code to create Tab Effect? Can you share the code & Where did you insert that code?

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.

I also have this issue

I know it's a late answer but this might help some others if you already solved the issue.

Try to disable Ajax Loading from Design > Site Styles if enabled.