Navigation Dropdown – click and hover simultaneously

Hi there,

It’s possible, but it will create conflicts.

When you click on a menu item, the submenu is shown, now you hover over another menu item, and a new submenu is shown, so both of the submenus will be shown at the same time.

To avoid this conflict, you will need custom JS which is out of the scope of the support forum, unfortunately.

You can give the below CSS a try:

@media(min-width: 769px) { 
.dropdown-click .main-navigation li.menu-item-has-children:hover > ul, .dropdown-click .main-navigation ul li.sfHover > ul {
    display: block;
    left: auto;
    right: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    height: auto;
    overflow: visible;
    float: none;
}
}

And can you give me function/hook for adding Navigation Dropdown choices for menus in Generatepress?

what do you mean? can you explain some more?

Hi there,

this is going to confuse users and be a UI/UX nightmare.

Consider; in the normal state the Click option and the hover option has 2 states, Open and Close.
Trying to combine the two gets weird. Consider this:

1. default state Menu is not open
2. On Hover – the custom CSS opens the submenu
3. On Click – the submenu item is set to open state.
There is no visible change accept for the toggle icon, as the hover state still applies
4. On 2nd Click – the menu item is set to close state.
But again there is no visible change accent for the icon as the hover state still applies
5. On mouse out – the custom CSS no longer applies.
And the open/close state will depend on the last clicked state.

So you can’t really have it as Either Hover or Click. It has to really be one or the other.

No provlem – glad to be of help

Hi there,

that’s not a function of the menu script , but you could try something like this:

const menuItemsWithChildren = document.querySelectorAll('ul li.menu-item-has-children');

menuItemsWithChildren.forEach(menuItem => {
    menuItem.addEventListener('focusout', (event) => {
        setTimeout(() => {
            
            if (!menuItem.contains(event.relatedTarget)) {
                // Remove classes from parent and submenu
                menuItem.classList.remove('sfHover');
                const submenu = menuItem.querySelector('.sub-menu.toggled-on');
                if (submenu) {
                    submenu.classList.remove('toggled-on');
                }
            }
        }, 100);
    });
});

The script will listen for any out focusing on parent menu items and strip it and it the submenu of the open classes.

Hi David I tweaked it to this and this works:

const menuItemsWithChildren = document.querySelectorAll('ul li.menu-item-has-children');

menuItemsWithChildren.forEach(menuItem => {
    menuItem.addEventListener('focusout', (event) => {
        setTimeout(() => {
            
            if (!menuItem.contains(event.relatedTarget)) {
                // Remove classes from parent and submenu
                menuItem.classList.remove('sfHover');
                const submenu = menuItem.querySelector('.sub-menu.toggled-on');
                if (submenu) {
                    submenu.classList.remove('toggled-on');
                }
                
                // Toggle aria-expanded attribute to false
                const dropdownToggle = menuItem.querySelector('.dropdown-menu-toggle');
                if (dropdownToggle) {
                    dropdownToggle.setAttribute('aria-expanded', 'false');
                }
            }
        }, 100);
    });
});