[Resolved] Navigation Menu Active Tab Gradient?

[Shane]

Hey Gang,

I’ve been playing more with layout and possibilities for blog.southernstatesimaging.com and have run into some trouble setting the gradient of the navigation menu items in their ‘Active’ state.. I’d like the Active state of all of the navigation menu items to have the same gradient which successfully applies to the navigation menu items in their ‘Hover’ state.. I have been playing with Microthemer UI to help with precise CSS adjustments and for help dealing with Soliloquy sliders attributes.. I’ve tried many selectors but I can’t seem to identify the appropriate ‘Active state’ class/selector to apply the navigation menu to get the gradient to apply to active items.. Is there a big incompatibility problem with Microthemer and the generate Press theme I have overlooked?

Thanks!

[bdbrown]

Hi Shane. I believe the “current-menu-item” class will give you the active menu selection. If that selection happens to be in a submenu, the “current-menu-ancestor” class will give you the top level active item.

[Shane]

Got the Main Nav menu items to go gradient when a submenu item is selected, but not when the main menu items themselves are created.. Current-Menu-Item doesn’t seem to have any effect.. Also noticed that the Veterinary and Blog menu items both behave differently as well.. I hadn’t made any deliberate adjustments to these specific buttons.. Ideas what’s causing these funny responses?

[Tom]

Have you tried targeting the element with this selector?: .main-navigation .main-nav ul .current-menu-item > a

[Shane]

Hmm, still no luck :-/ I’m not sure if you’re very familiar with Microthemer and I feel bad troubling you guys with support of it FOR GeneratePress theme.. I believe I am targeting the correct element, applying the gradient to that full selector seems to have no effect.. Can’t get the ‘blog’ button to change to the gray gradient at any time..

[Tom]

Weird, so you’re using that plugin to add the CSS? I’ve never used it.

What if you add !important to the end of your CSS?

Like this:

.selector {
   background: my-value !important;
}

[Shane]

This plugin seems to be adding the !important to most all the code snippets it generates.. I can give you temp admin access to the site if you think it will help you pinpoint why I still can’t seem to find the right selectors.. It’s a mess. Would like to get navigation functioning properly in active states, both when main menu items are selected/hovered over, and when sub menu items are being hovered over.. As of now the main menu changes back to flat gray again.. Also the ‘Veterinary’ tab seems unresponsive to any of the other selectors that make change, not sure why.. Is there any kind of key that describes specifically what element each navigation selector denotes a little more intelligibly?

[Tom]

Honestly, if the plugin is adding !important to everything it generates, I suggest finding a different one. Using !important should only be used in certain cases, and rarely at that.

Are you just trying to add background images to your navigation? Have you taken a look at our Backgrounds add-on?

[Author]

Posts