Woocommerce Storefront navigation menu active page color change

Question

This is my website graceamaron.com

It was wordpress hosted site.

I have changed the primary navigation menu hover from default to #4fff51 by the below CSS.

.storefront-primary-navigation ul li a:hover {
    color : #4fff51;
}

And now I have tried to change active menu color by below code

.storefront-primary-navigation ul li a:active {
    color : #4fff51;
}

But it's not working, how can I fix it?

Answer 1

Your WordPress theme adds the class current_page_item to the li item that is active. So if you want to change the active page URL color in the nav menu use the following class:

.current_page_item a {
    color: red!important;
}

See screenshot to see it working.