How to change the active status color on the navigation menu on just the specific part?

[poshpush]

So I set the menu hover color and its active status color as the same color. For the button, "Book Now", I changed the background color when it's hovered. But since the active status color and the hovered background color are the same, when I hover the "book now" button, the text becomes invisible. How can I change the active status color just for the specific part, which is book now text? Here's the page with the issue and code I used: https://www.poshpush.me/pages/services

.header__menu-item:hover span {
text-decoration: none; 
}


.header__active-menu-item {
  text-decoration: none; 
  color: #93859F; 
   }

.header__menu-item:hover {
color: #93859F;
}


#HeaderMenu-book-now:hover {
color: #F8EBEB;
background: #93859F; 
}

[Dan-From-Ryviu]

You can do that by adding this code to Custom CSS in Online Store > Themes > Customize > Theme settings.

a#HeaderMenu-book-now:hover span {
    color: #e2acc7;
}

[devcoders · Accepted solution]

Hello @poshpush 

1. From your Shopify Admin, navigate to Online Store > Themes > Edit Code
2. In the Assets folder, open base.css and add your CSS code at the end

.header__menu-item:hover .header__active-menu-item {
color: #000;
}

[devcoders]

Hello @poshpush 
Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful, please like all posts.