How to not highlight a page used twice in navigation on mobile menu?

Support
#1

Hello,

I am using the same page/url for a page that appears twice in navigation. Mina navigation as well as a drop down item in another tab.
They are linking together, same highlight color on mobile. Any way to avoid the driop down to highlight?

I tried playing with adding a CSS class to the drop down in the menu and naming it no-highlight but I must be doing something wrong…

Attached pic to be clearer explanation in safe note.
Edit: It’s ATV and Deluxe ATV which use same page.

Thanks for your help.

#2

Hello Isabelle,

Thanks for writing in! For the menu items, WordPress will automatically add “current-menu-item” or “current-menu-parent” when viewing on the page. You can use that custom class for your custom CSS. I would also recommend that you include page ID as well. For example:

body.page-id-30 .ubermenu-current-menu-parent a {
   /* your styling here */
}

As you can see in the code above;

  • the 30 is the page ID of the Deluxe ATV page.
  • ubermenu-current-menu-parent is when the “All Tours” menu item becomes active since it is a menu parent of the page.
  • a is added to target the menu item link element

Screenshot 2025-09-25 124028

Hope this makes sense.

#3

Thank you! It worked great.

Just added
background: none !important;

/* No highlight on page in drop down menu */
body.page-id-30 .ubermenu-current-menu-parent a {
background: none !important;
}

Have a great day.

#4

You are most welcome, Isabelle.