CSS menu help

To achieve this you need to declare a class, say ‘menu-item-selected’ with your css styles on them…You are then going to need to use jQuery to assign the class menu-item-selected to the parent menu item upon hovering over the child menu items.

I’m a CSS neophyte wanting to customize the text colors on the nav bar for my website. How can I do that with CSS?

Hi Evan. Sorry, I don’t think I was clear.

I don’t want to highlight the main menu tab when hovering on a child. I want to highlight the main menu tab after clicking the child menu item.

In fact, all that is happening correctly as I currently have things set up.

The problem is that children for pages that haven’t yet been visited are highlighted in white too (until they’re visited). And that I don’t want.

I’m using a css child theme. I just apparently don’t know how to successfully target just the main menu tab with the highlight.

Current

Desired

Site

@rglaadmin

please start your own topic; https://www.ads-software.com/support/forum/how-to-and-troubleshooting#postform

for pure formatting questions, also consider to ask in a CSS forum like https://csscreator.com/forum

Stephen,

Find the following around line 86 of your stylesheet:

/*leaves the parent main menu tab highlighted once a child is clicked*/
/*#nav ul li.current-menu-parent a,*/
#nav ul li.current-menu-ancestor a {
background-color: #FFFFFF;
}

And replace it with:

/*leaves the parent main menu tab highlighted once a child is clicked*/
/*#nav ul li.current-menu-parent a,*/
#nav ul li.current-menu-ancestor > a {
background-color: #FFFFFF;
}

Why edit the theme’s files like that when those modifications will just be erased when the theme updates?

Yes, Ivan. Brilliant! Thank you.

If it’s easy, would you mind stating this in English? (If it’s a chore, forget it.)

#nav ul li.current-menu-ancestor > a

Andrew, these modifications go into a child theme that’s not over-written (to the best of my knowledge).

Stephen, you’re very welcome! You are correct, as well in that since you are editing a child theme, it will not be overwritten if you update a stock theme such as twenty-eleven.

As far as an explanation for the code, it was previously selecting all anchor (or ‘a’) elements contained within the list item with a class ‘current-menu-selector.’ So by placing the ‘>’ it selects only the anchor element immediately within the list item. So any anchor elements immediately within the list item will be selected but any anchor elements further down the nest (such as in another unordered list) will not be selected.

For example:

<ul>
    <li class="current-menu-item">
        <a href="#">This will be selected since it's an immediate ancestor</a>
        <ul class="sub-menu">
            <li>
                <a href="#">This will not be selected since it's not an immediate ancestor. It's an ancestor of an additional unordered list.</a>
            </li>
        </ul>
    </li>
</ul>

So essentially by just placing a space, it selects ALL following anchor elements held in that element. By placing the ‘>’ it selects just the ones closest to the parent element.

Thanks for the help. Much appreciated. GREATLY appreciated!