Highlight parent page as active in menu

Tagged: ally, child, menu, parent

This topic has 5 replies, 3 voices, and was last updated 8 years, 4 months ago by Mark Scott.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
December 14, 2015 at 4:44 pm #16841
Mark Scott
Customer
I’m using the header-right menu as the main menu, but there is no sub-menu.

I’ve assigned pages with parents, and the parents are in the menu.

Is there a way to show the parent as active in the menu?

I did a Google search of the issue and followed various intructions to change the CSS, but none have worked.

Can anyone help?
December 14, 2015 at 9:32 pm #16921
kronos
Customer
What’s the link to your site?
January 11, 2016 at 5:35 am #16982
Mark Scott
Customer
Hi kronos.

I can’t link to the site because it’s on a private development server. I hope this is a better explanation of what I want:

The header-right menu has seven menu items.

One of the menu items is ‘About’. It doesn’t have a sub-menu. This menu item opens the About page.

The About page links to six other pages. The About page is the parent page to all six pages.

If I’m on one of the six pages, I want the About menu item to be highlighted in the menu.

Is this possible? If so, how do I do it?
January 11, 2016 at 1:43 pm #16984
Andykev
Customer
YES!

Go to “inspect element” and look at the .id for the specific menu item.

Then use this code in your .css to make the menu item whatever color you want.
```
li.menu-item-95 a {
background: #ff0000 !important;
font-weight: bold !important;
padding-left: 5px !important;
padding-right: 5px !important;
}
```
This above example will make the box bright red with bold text.
Adjust the padding, etc. as necessary. The important thing
is the ‘li.menu-item-XX a ‘ …the XX is your specific target item
January 11, 2016 at 6:39 pm #16986
Mark Scott
Customer
Andykev, thanks for your response.

Unfortunately, this isn’t what I want. This causes the menu item to be permanently highlighted.

I only want the menu item highlighted if the page or one of its child pages is active.

So, for example, ‘About’ is one of seven menu items. The About page is parent to six pages; one of the six pages is ‘Our Company Values’. The six pages are not in a sub-menu.

If I’m on the Our Company Values page, I want the About menu item to be highlighted.

Is this possible and, if so, how do I do it?
July 24, 2016 at 1:50 am #18837
Mark Scott
Customer
After trying many different things in CSS, none of which worked, I came across this code:

http://sikwati.com/blog/highlight-parent-page/

This did exactly what I wanted.
Author

Posts