Font colors in top menu

I agree, it is ridiculous that a theme that should be as refined as Enfold, does not have an easy way to change the active state color of a menu item or the hover color of the menu without having to use custom css!!!!!!

Please supply the custom css

I could really use some help with this header / main menu font colors issue.

I’ve been working on it for the past 4 hours, trying different variations of custom CSS.

The demo we’re using defaults the top main menu/header to transparent, but we needed the site to have white background on the header/main menu, so we added this CSS (from a different kriesi.at/support thread) to fix that:
div#header_main {
background-color: white;
}

Then this CSS, also from kriesi.at support, to resolve the phone number/socials above-main-menu header section to a white background.
#top .av_header_transparency #header_meta
{ border: none;
background-color: white; }

But what happened was that the header colors (active page, hover, and normal menu-item link text) were now broken up into two different configurations: the first one for when browser is at the top of the page, but a different one when the site visitor scrolls down the page. Menu options within Enfold menu appeared to only impact the ‘scrolled’ options, so I kept searching and trying different CSS to resolve/get them to both behave the same way.

It seemed like I finally found a solution for the settings being split into two different ones by adding this
#header{
position: fixed !important;
}

And it seemed like I’d found the solution for the proper hover and menu-link colors with this:
#header_main { color: #919191; } /* color of main menu items */
#header_main a:hover{ color: #e0b13a !important; } /* hover state of main menu items */

but then when I tried the same thing for the ‘active page’ font text, it didn’t work, even with the !important in there:
#header_main a:active
( color: #000000 !important;
}

So I went ahead and tried a different approach for the ‘active page’ color (so the site visitor knows what page they’re on) with this:
.header_color .main_menu ul:first-child > li.current-menu-item > a, .
header_color .main_menu ul:first-child > li.current_page_item > a
{ color: #000000 !important;
}

It worked, yes, but now there’s a new problem, which is that when I click on a main menu link, the page begins to load up (goes to the lightbox screen), then comes back to the current page for a few moments, and only THEN renders the page for the link that was clicked on… So this ends up looking bad and producing a poor user experience.

Please help! I feel like there is surely an easy fix for this, but I have been unable to find it. Thanks so much!

UPDATE:

Unchecking the “Page Transitions” box in Enfold > Theme Options solved the reloading same page issue… Whew!

• This reply was modified 6 years, 9 months ago by willmfraz. Reason: Resolved issue