[Resolved] Currently Selected Menu Item

[Stephen]

Tom,

I cannot figure out how to add css to the currently selected menu item. I have been able to add css to menu items in the hover condition, but not the currently selected menu item.
Please advise,

Stephen

[bdbrown]

Hi Stephen. Try the .current-menu-item class.

[Stephen]

bdbrown,

I tried what you suggested, but with no success. I tried to add a css class like this:

.current-menu-item {
text-decoration: underline
}

Please let me know what I am doing wrong.

Thank you,
Stephen

[bdbrown]

Where are you adding that css? It could be that it’s being overridden by a more specific style. You could narrow the specificity by adding higher-level identifiers. Or you could try adding the !important argument. If you can post a link to your site I can take a look.

[Stephen]

bdbrown,

I added the custom css via the Jetpack plugin.
The website I am working on is barbersbrand.com.
I have already added hover effects with css, but i am having trouble adding it to the current menu item as I mentioned earlier.

Thank you bdbrown,
Stephen

[bdbrown]

If you want to add an underline to the menu item text, try this:

.current-menu-item a {
    text-decoration: underline;
}

[Author]

Posts