Sidebar CSS Flyout Menu
 

I'm having a hard time getting my sidebar menu to have the same hover effect as my top menu.

Here is the CSS I used:
.flyout-menu > li > a:hover,
.flyout-menu > li > a:focus {
color: #F4EFE7;
background-color: #00244D;
}

.flyout-menu > .active > a,
.flyout-menu > .active > a:hover,
.flyout-menu > .active > a:focus {
color: #F4EFE7;
background-color: #00244D;
}

The background color changes, but the li and text color does not. :?

https://test.duffystric.com/

Re: Sidebar CSS Flyout Menu
 

Which template are you using?

Re: Sidebar CSS Flyout Menu
 

Crisp White skin

Re: Sidebar CSS Flyout Menu
 

Oh, sorry, it was in the signature...


I tested and a strange thing happened. I edited custom css, and your css code actually worked both for the background color and text color. However, when I switched to another page, none worked... (x-cart 5.4.0.10 with crispy white skin). I am afraid this doesn't help you much...

Re: Sidebar CSS Flyout Menu
 

Mostly like you used very specific classes that were changed once a new page was loaded. I would recommend checking same sections on different pages. It is possible that some additional steps could be added there.

E.g. WAS: .flyout-menu > .active > a BECAME: .flyout-menu > .div > .li > .active > a

etc.

Re: Sidebar CSS Flyout Menu
 

Thanks, but I don't understand what I should change.


Here is the CSS I used:
.flyout-menu > li > a:hover,
.flyout-menu > li > a:focus {
color: #F4EFE7;
background-color: #00244D;
}

.flyout-menu > .active > a,
.flyout-menu > .active > a:hover,
.flyout-menu > .active > a:focus {
color: #F4EFE7;
background-color: #00244D;
}

Re: Sidebar CSS Flyout Menu
 

It's impossible to say what you should change as almost every template has a different structure. I would recommend checking them with the browser devtools to see how blocks are constructed.