Active Menu

Hi,

can you post a link to your site please? It will make be easier to assist you.

Thanks

Link

Thanks for you reply Thimothe

so you’ll need to apply some custom css to make it work. Look for an option in your theme options and if you can’t find one, you can proceed with a Customm css plugin or creating a child theme.

In the custom css, you’ll want to style according to this example

// Styling for the parent menu item
.main-navigation ul li.current-menu-parent {
background-color:green; //just an ugly example
}

// Styling for the current page
.main-navigation ul ul li.current-menu-item {
background-color:red; //just an ugly example
}

And if you want both the parent and the current menu item to have the same styling, you can combine both declarations together like this

.main-navigation ul li.current-menu-parent, .main-navigation ul ul li.current-menu-item {
background-color:yellow; //just an ugly example
}

I hope this helps

I have tried your code, but its not working . could you please elobrate more.

Thanks for your effort…
V.Lakshman

Thimothe’s code is nearly spot on. You just need to target the A tag instead.

.main-navigation ul li.current-menu-parent a, .main-navigation ul ul li.current-menu-item a {
background-color:yellow; //just an ugly example
}

If that still doesn’t work, you could try adding an !important to the background colour.

sorry guys, i have tried that it dosent worked for me…

Where did you paste the code?

Can you see the code being displayed on your site through Chrome Dev Tools or Firebug? It is possible that you have a cached copy (either through CDN , cache plugin or browser cache) which prevents the change from displaying in your browser.

Hello,

I tried the code above, made some adjustments, and it worked ??
This is it:

.main-navigation ul li.current-menu-parent {
background-color:green;
}
.main-navigation ul li.current-menu-item {
background-color:red;

Greetings
Sarah