CODEWITHSUNDEEP
wordpress
Quantum_Entanglement
Quantum_Entanglement

Reputation: 1633

Wordpress - Highlight the parent menu-item when child menu item page is selected/loaded

I have a basic menu and some of the menu items have submenus. I have very little experience with wordpress and don't have time to dive deeper into the details right now. So my question is, what is the simplest way to highlight the top menu item when the use navigates to one of the submenu pages. (I tried using both javascript and also pure css to set the color property by element id and by using the "current-cat-parent" class but neither worked).
Any help is greatly appreciated.

Note: I am using a theme called chameleon.

Upvotes: 7

Views: 25044

Answers (8)

Mohammadreza Askari
Mohammadreza Askari

Reputation: 583

if you trying to highlight parent item exist on main-menu (like me!), try this with jQuery:

jQuery(document).ready(function() {
    jQuery('#menu-mainmenu a[href*="' + document.URL.split('/')[3] + '"]')
        .parent().addClass('current-menu-item');
});

i also added 'default' class into the one of items (at 'li') to select it for my post pages:

jQuery(document).ready(function() {
    if (jQuery('#menu-mainmenu a[href*="' + document.URL.split('/')[3] + '"]')
        .parent().addClass('current-menu-item').length == 0 &&
        document.URL.split('/')[3].length > 1)
        jQuery('#menu-mainmenu .default').addClass('current-menu-item');
});

with this, you will have selection as below. Ex: Home | Shop | Posts | About-us

'http://example.com': >Home | Shop | Posts | About-us

'http://example.com/shop': Home | >Shop | Posts | About-us

'http://example.com/shop/product-1': Home | >Shop | Posts | About-us

'http://example.com/posts': Home | Shop | >Posts | About-us

'http://example.com/new-post': Home | Shop | >Posts | About-us

'http://example.com/about-us': Home | Shop | Posts | >About-us

Upvotes: 0

Dexter
Dexter

Reputation: 9324

WordPress 5.7

Tested and Working, 2021

Year 2021. If any of you still looking for the solution, then here it is.

This will highlight the parent and its child. If no child menu then the parent will get highlighted. Remember !important is required.

.current-menu-parent > a,
.current-menu-item a { 
    color: blue !important; /* Important is required */
}

Upvotes: 1

Really Nice Code
Really Nice Code

Reputation: 1334

This worked for me. The following CSS will allow you to style the active menu... down to three menus deep.

.current-menu-ancestor{ background:RED !important; }
.current_page_parent{background:GREEN !important;}
.active{background:YELLOW !important;}
  • The menu button that represents the currently active page will be YELLOW,

  • If the button representing the currently active page is nested, its parent will be GREEN... else the Top-Level button on your menu will be GREEN.

  • And most importantly (no matter how many levels of nesting appear in your menu) Any element with a class of .current-menu-ancestor will be styled with a RED background.

It is also possible to ONLY style the .current-menu-ancestor and any parent menu-item will be styled.

Upvotes: 1

Dana Williams
Dana Williams

Reputation: 53

Interesting. Your solution highlighted the parent but not the current child. But it put me on the right path and in the end, this was what I needed. 

li.current-menu-parent >a, .current-menu-item >a {
    color: red !important;
}

Upvotes: 3

katia_ck
katia_ck

Reputation: 31

I had a bit of a problem editing this but found an easy solution. I am using the Wordpress Storefront theme, just paste this into your child theme's style.css file:

li.current-menu-parent >a {
  color:red !important;
}

Upvotes: 3

Bibiano Wenceslao
Bibiano Wenceslao

Reputation: 131

You can insert the following code in the theme’s footer.php file right before the closing body tag .

<!-- Highlight parent page link when on child page -->
<?php if (is_page()) {   //  displaying a child page ?>
    <script type="text/javascript">
        jQuery("li.current-page-ancestor").addClass('current-menu-item');
    </script>
<?php } ?>

The beauty of this is its in PHP so the code's dynamic. What it does is simply add another native WordPress nav li class that makes the link of the current page active.

I wrote a short post here explaining how it works: How to keep parent page navigation link highlighted when viewing a child/sub page!

Feel free to let me know if you have questions about it.

Upvotes: 3

Mahesh Ruparel
Mahesh Ruparel

Reputation: 126

you can assign current-menu-item class to .current-menu-ancestor class like

.main_menu li.current-menu-item a, .main_menu li.current-menu-ancestor a{
    color: #777777 !important; /* highlight color */
}

It will highlight parent page menu

Please refer this page

Upvotes: 11

AnaRita
AnaRita

Reputation: 127

.current-menu-ancestor did not work for me. .current-page-ancestor did.

Upvotes: 0

Related Questions