Coding for Navigation Bar Highlight

Site URL: https://nourishbytara.com

Hi. I am having trouble getting my navigation bar coding correct. I added coding so when you hover over the navigation options it highlights them green and changes the font to white. However, once you select a category, when you hover over the items in the drop down in that category it changes the font from white to black. If you hover over adjacent categories that you have not selected the white font works. It is only once you are within a particular category that it does not work. I have attached images. It is difficult to explain. I would like for the font to remain white. 

6 hours ago, MeggKix said:

Site URL: https://nourishbytara.com

Hi. I am having trouble getting my navigation bar coding correct. I added coding so when you hover over the navigation options it highlights them green and changes the font to white. However, once you select a category, when you hover over the items in the drop down in that category it changes the font from white to black. If you hover over adjacent categories that you have not selected the white font works. It is only once you are within a particular category that it does not work. I have attached images. It is difficult to explain. I would like for the font to remain white. 

So you want the text to remain white even on hover? Or are you wanting something different?

Remove or comment out your last two rule sets in your CSS and add the following.

body[data-menu-overlay-theme-switcher="true"]:not(.header--menu-open) .header-nav-folder-content a:hover {

  color: white;
  
  }

body[data-menu-overlay-theme-switcher="true"]:not(.header--menu-open) .header-nav-folder-content .header-nav-folder-item:hover {

  background-color: #445751;
  
  }

This is for a v7.1 site.

When you put the above CSS in, the active link will be off white but not black.

If you still want to change the active link color then add the following.

body[data-menu-overlay-theme-switcher="true"]:not(.header--menu-open) .header-nav-wrapper .header-nav-item--active a {

  color: #4a412b;

  }

Change the color to suit.

Let us know how it goes.