[Resolved] OnClick Primary Menu Issues

[Michael]

We’ve developed a child theme in GP to serve as our main theme for a multisite install. I’ve always heard that OnClick for menus is more accessible but when I set the Navigation Dropdown to Click – Menu Item it seems to work for the most part in desktop except it looks like child menus overlap each other because when the cursor roles off of one, it doesn’t hide it but overlap each other. I demonstrate this in the first part of the video which I’ve included a link to. I’m finding a similar issue in mobile where a user almost gets lost trying to navigate.

When I switch it back to hover, it seems to work fine as demonstrated in the second half of the video.

I’d like to remain with the OnClick version but would like your thoughts. I’ve deactivated every plugin I can that is not network activated and still no joy.

Can this overlap issue be resolved?
Is OnClick better than Hover in regards to accessibility?

I’ve also included a link to my test site.

Thanks much,

Mike

[Fernando]

Hi Michael,

Did you add this custom code?:

.dropdown-click .main-navigation ul ul ul, 
.dropdown-click .secondary-navigation ul ul ul {
    left: 100% !important;
    top: 0 !important;
    position: absolute !important;
}

If you remove that, the style would return to the previous one, wherein the overlap shouldn’t occur.

[Michael]

Thanks Fernando! That worked. Is there anyway to align the child menus of sub menus expand to the right (versus vertical expanding) without breaking it like I did? Thanks again.

[Fernando]

Well, you’d need a JS code for that which would be out of our scope of support.

Something simpler would be to just automatically close a submenu once another is opened.

To do this, create a Hook Element, and add this code:

<script>
var parentElementLinks = document.querySelectorAll('.menu-item-has-children > a');

for (var k = 0; k < parentElementLinks.length; k++) {
    parentElementLinks[k].addEventListener('click', function() {
			console.log("Hello! I am an alert box!!");
        var _this = this;

        var openedSubMenus = _this.closest('ul').querySelectorAll('ul.toggled-on');

        if (openedSubMenus) {
            for (var o = 0; o < openedSubMenus.length; o++) {
                openedSubMenus[o].classList.remove('toggled-on');
                openedSubMenus[o].closest('li').classList.remove('sfHover');
            }
        }
    }, true);
}
</script>

Hook it to wp_footer and set it to display on your entire site.

[Michael]

Thank you again Fernando. I’ll mark this as resolved. Appreciate it.

[Fernando]

You’re welcome Michael!

[Author]

Posts