Vertical Nav sub-menu: How to keep it toggled on/expanded when pages are active

Hi there,

That will require custom JavaScript. Here’s what I can came up with:

document.addEventListener('DOMContentLoaded', function() {
    // Check localStorage on page load and apply toggled state if needed
    const currentSubmenuId = localStorage.getItem('currentSubmenuId');
    const currentPath = window.location.pathname;
    
    // Get all the links in the current submenu
    const currentSubmenu = document.getElementById(currentSubmenuId);
    if (currentSubmenu) {
        const submenuLinks = currentSubmenu.querySelectorAll('a');
        const isCurrentPathInSubmenu = Array.from(submenuLinks).some(link => 
            link.getAttribute('href').includes(currentPath)
        );
        
        // Only keep submenu open if we're on one of its pages
        if (isCurrentPathInSubmenu) {
            currentSubmenu.classList.add('toggled-on');
        } else {
            localStorage.removeItem('currentSubmenuId');
        }
    }
    
    // Set up click handlers for all menu items
    const allMenuItems = document.querySelectorAll('.menu-item a');
    allMenuItems.forEach(item => {
        item.addEventListener('click', function(e) {
            const clickedSubmenu = this.closest('.sub-menu');
            
            // If this is a submenu item
            if (clickedSubmenu) {
                // Store this submenu's ID
                localStorage.setItem('currentSubmenuId', clickedSubmenu.id);
                
                // Ensure it stays open
                clickedSubmenu.classList.add('toggled-on');
                
                // Remove toggled-on from all other submenus
                document.querySelectorAll('.sub-menu').forEach(menu => {
                    if (menu.id !== clickedSubmenu.id) {
                        menu.classList.remove('toggled-on');
                    }
                });
            } else {
                // If clicking a main menu item, clear all submenus
                localStorage.removeItem('currentSubmenuId');
                document.querySelectorAll('.sub-menu').forEach(menu => {
                    menu.classList.remove('toggled-on');
                });
            }
        });
    });

    // Use MutationObserver to prevent unwanted closing
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                const submenu = mutation.target;
                const currentSubmenuId = localStorage.getItem('currentSubmenuId');
                
                if (currentSubmenuId === submenu.id) {
                    const submenuLinks = submenu.querySelectorAll('a');
                    const isCurrentPathInSubmenu = Array.from(submenuLinks).some(link => 
                        link.getAttribute('href').includes(window.location.pathname)
                    );
                    
                    if (isCurrentPathInSubmenu && !submenu.classList.contains('toggled-on')) {
                        submenu.classList.add('toggled-on');
                    }
                }
            }
        });
    });

    // Observe all submenus
    document.querySelectorAll('.sub-menu').forEach(submenu => {
        observer.observe(submenu, {
            attributes: true
        });
    });
});

If this doesn’t work, you may need to reach out to a custom developer for assistance, as this is outside our support scope.

Try this CSS:

#generate-slideout-menu.main-navigation ul ul {
    display: block !important;
    opacity: 1 !important;
    visibility: visible;
    height: auto;
}

Glad to hear you got it working!