Highlighting nav bar menu items

Hello @engine44,

Depending on how your theme is set up, you should be able to highlight the main menu bar using something like:
.current-menu-ancestor { color: XXX, background: XXX, border: XXX }
or
.current-menu-parent { color: XXX, background: XXX, border: XXX}.

If it’s possible to share a link to your site, we can help you identify what code you need to use. This CSS code could then be added in the Appearance > Customize > Additional CSS section of your WordPress Admin dashboard.

• This reply was modified 4 years, 2 months ago by Niall Madhoo.

Thank you. My site is currently on localhost and I use the Vantage theme from Site Origin. Of course, it will automatically highlight the current page in the menu. The main issue I have is that when you click on a child in the menu dropdown, how does the program know that you want to also highlight the parent? Somehow, there has to be a code connection between clicking on the child and the highlighting of the parent. Do the classes .current-menu-ancestor and .current-menu-parent have special meaning to the program? Thanks.

• This reply was modified 4 years, 2 months ago by Engine44.

You’re welcome. If I understand correctly what you’re asking, the parent highlights and activates the dropdown submenu using this code on line 989 of the style.css file on https://vantage-demo.packs.siteorigin.com/:

.main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul {
    visibility: visible;
    opacity: 1;
}

The highlight for the parent menu item is determined by:

.main-navigation ul li:hover > a, .main-navigation ul li:focus > a, .main-navigation ul li:hover > a [class^="fa fa-"] {
    color: #333333;
}

And for the submenu item, it’s:

.main-navigation ul ul li:hover > a {
    background-color: #ffffff;
    color: #333333;
}

The submenu item only drops down when a user hovers over the parent menu item. That also means that the parent menu item always highlights when the submenu item is visible. The submenu item cannot display without the parent menu item.

.current-menu-parent is the element directly above or to the left of the page that’s currently open (.current-menu-item and .current_page_item).

.current-menu-ancestor are all the menu elements that are above or to the left of the currently open page (.current-menu-item and .current_page_item).

For instance, with the Blog: Grid Layout page open and its menu selected, it would be as follows:

If the currently opened page is a WordPress post, then its menu item would only be .current-menu-item

To highlight the menu items when the respective menu or submenu item is open as a page in the browser, please add the following CSS code in the Appearance > Customize > Additional CSS section of your WordPress Admin dashboard:

/* Highlight all current-menu items up to 2 submenus (ul ul ul li... would be 3 menus) */
.main-navigation ul li.current-menu-ancestor > a, .main-navigation li.current-menu-item a, .main-navigation ul li.current-menu-item a, .main-navigation ul ul li.current-menu-item a {
  color: black;
}

I have the “Standard with Sidebar“ post open, and the Blog menu is highlighted as follows without me hovering my mouse over any of the items:

The Blog menu item highlights on the same post without the submenu open. That’s because the “Standard with Sidebar“ post is also a link in the submenu under Blog:

Works great. Thank you for the detailed response.

You’re welcome!

If your question has been answered, it would be great if you would mark this topic as resolved in the sidebar. This helps the forum’s volunteers find the topics that still need attention and more people will get helped, possibly like you did.

@nm1com

Thanks so much

I needed to highlight the ACTIVE PARENT MENU ITEM when a submenu item is selected – based on the menustructure (not the page structure it self)

This code really helped me:

/* Highlight all current-menu items up to 2 submenus (ul ul ul li... would be 3 menus) */
.main-navigation ul li.current-menu-ancestor > a, .main-navigation li.current-menu-item a, .main-navigation ul li.current-menu-item a, .main-navigation ul ul li.current-menu-item a {
  color: black;
}

I did a small change and now it works well for me on a “Elementor” site

/* Highlight all current-menu items up to 2 submenus (ul ul ul li... would be 3 menus) */
.elementor-nav-menu--main  ul li.current-menu-ancestor > a, .main-navigation li.current-menu-item a, .elementor-nav-menu--main ul li.current-menu-item a, .main-navigation ul ul li.current-menu-item a {
  color: #7a9875!important;
}

Thanks again from Copenhagen

• This reply was modified 3 years, 9 months ago by FGU Nord / Lars.

Hello,

I know this is an old thread, but is it possible to not only highlight the menu but also drop it down to the subcategory you are in?

@FGU Nord / Lars
Thank you so much, I was struggling with this on elementor!
That was the solution I was looking for and so simple.
Thought I need to write a PHP function ??
Once again thanks so much!

I have also modified it a bit for myself, so the submenu current item doesn’t change the colour while is selected. Sometimes we don’t need to change already set colours in elementor.

.elementor-nav-menu--main  ul li.current-menu-ancestor > a, .main-navigation li.current-menu-item a,  .main-navigation ul ul li.current-menu-item a {
	color: #7a9875!important;
}

So this way you only adding a highlighted colour on parent item which I needed.

• This reply was modified 3 years, 4 months ago by maryando.