Highlight parent menu items when viewing sub-pages
I noticed recently that the Beaver Builder theme header menu items were only highlighted when I was viewing the associated page – if I navigated to a subpage of that page, the menu item would no longer remain highlighted.
I like to give as many visual clues as possible to help users understand the context and depth of my site. Highlighting menu items is an important way of indicating where they are on the structure of the site. It also reinforces the main sections of your site – the sections that should be the basis of your header menu.
So keeping main menu items highlighted when viewing subpages is really important to me. There are two ways to achieve this:
Nested Menu Items
The first way expects that you have nested sub-menu items in your header menu.
Add nested menu items to your header menu as per the screenshot below.
With ‘Themes’ and ‘Modules’ nested below ‘Products’ in this example and using the CSS code above, ‘Products’ will always remain highlighted when navigating to either of these sub-pages. The screenshot below shows that I am on the module page and the ‘Products’ menu item is still highlighted.
This next option expects that the pages and subpages of your site are nested. See the screenshots below for an example. In the CSS code, you’ll notice that the only thing that has changed, is instead of – ‘.current-menu-ancestor’ – we now write ‘.current-page-ancestor’. This ensures that any pages nested below your main menu item will remain highlighted.
In the screenshot above you can see that Modules is a subpage of Products so using the CSS will ensure that when you are on the Modules page, the Products menu item will remain highlighted.
Add either CSS snippet to your style.css file in your child theme, or add it to the Beaver Builder Global settings CSS tab, or in the theme Customiser –> Code –> CSS Code tab.
This solution is in part thanks to the Beaver Builder support article I found here.