Custome CSS only working in Edit Mode

Site URL: https://www.jealousfruits.com/

I am trying to get the Page titles and sub-pages to change colour when hovering over them - on the site header. The codes works when I am in edit mode but then doesn't actually work on the live site, or when exiting edit mode. 

When the website is live the background colour changes on hover but the text colour doesn't - even though the code should have the text change to black on hover. 

I have attached photos of the code and the issue. 

Hi

Use this code in Design -> Custom CSS

.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item:hover a {
    color: #000 !important;
}

Or add !important to your #000 value.

Please use the like button if it helps you!

Best,
Leopold

12 minutes ago, IXStudio said:

Hi

Use this code in Design -> Custom CSS

.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item:hover a {
    color: #000 !important;
}

Or add !important to your #000 value.

 

Please use the like button if it helps you!

Best,
Leopold

@IXStudio I tried to do this but it still doesn't seem to be working on the live website. It works perfect in the edit mode

Live Website: 

CSS CODE: 

Edit Mode: 

Did you use my code?

.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item:hover a {
    color: #000 !important;
}

Please use the like button if it helps you!

Best,
Leopold

This helped! Thank you!!😃