How to Keep WordPress Dropdown Menu Open on Child Pages | Step-by-Step Guide

Improving user experience in WordPress often involves tweaking navigation menus. A common request is keeping dropdown menus open when visiting child pages. Here’s how to achieve this with different methods.

Method 1: Using CSS (Simple Solution)

Add this CSS to your theme’s style.css or Customizer:

/* Highlight active parent menu item */
.current-menu-parent > a,
.current-menu-ancestor > a {
    color: #your-color !important;
    font-weight: bold;
}

/* Keep dropdown open on child pages */
.current-menu-parent > .sub-menu,
.current-menu-ancestor > .sub-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
}

Method 2: Using JavaScript/jQuery

Add this script to your theme’s footer.php or via a custom plugin:

jQuery(document).ready(function($) {
    // Get current page URL
    var currentUrl = window.location.href;
    
    // Loop through all menu links
    $('.menu-item a').each(function() {
        if (currentUrl === $(this).attr('href')) {
            // Add active class to current item
            $(this).addClass('active-menu-item');
            
            // Show parent dropdowns
            $(this).parents('.menu-item-has-children').addClass('menu-open');
            $(this).parents('.sub-menu').addClass('sub-menu-open');
        }
    });
});

Method 3: PHP Solution (For Theme Developers)

Add this to your theme’s functions.php:

function custom_nav_menu_classes($classes, $item) {
    global $post;
    
    if (is_singular() && $item->type == 'post_type') {
        $ancestors = get_post_ancestors($post);
        if (in_array($item->object_id, $ancestors)) {
            $classes[] = 'current-menu-ancestor';
        }
    }
    
    return $classes;
}
add_filter('nav_menu_css_class', 'custom_nav_menu_classes', 10, 2);

Method 4: Using WordPress Hooks (Advanced)

For custom menu walkers or complex themes:

class Child_Pages_Menu_Walker extends Walker_Nav_Menu {
    function display_element($element, &$children_elements, $max_depth, $depth=0, $args, &$output) {
        $id_field = $this->db_fields['id'];
        
        if (!empty($children_elements[$element->$id_field])) {
            $element->classes[] = 'has-children';
            
            // Check if current page is a child
            if (in_array('current-menu-item', $element->classes)) {
                $element->classes[] = 'menu-open';
            }
        }
        
        Walker_Nav_Menu::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
    }
}

Testing and Troubleshooting

• Clear your cache after making changes
• Check console for JavaScript errors
• Use browser inspector to verify CSS classes
• Ensure your theme supports WordPress menu classes

Conclusion

Keeping WordPress dropdown menus open on child pages enhances navigation and improves user experience. Choose the method that best fits your technical comfort level and theme structure. The CSS method is simplest for beginners, while PHP solutions offer more control for developers.