Nav Bar not working correctly

[cdarcy]

Hi,

The nav bar is not working correctly on my website below. When I try to click the drop down for roof trusses on my mobile it will not let me select an individual one:

https://murdockrooftrusses.com/

[nabeel]

Hi Conor,

Thank you for reaching out to us. I tested your site in couple of browsers and different devices and the dropdown menu seems to be working fine. Please note that to open dropdown menus in mobile devices you need to tap on the arrow icon. To make the experience better, you can try adding the following code in the Theme Options > CSS and see if this resolves the issue:

@media screen and (max-width: 979px) {
    .x-nav-wrap.mobile .menu-item-has-children .x-sub-toggle {
        z-index: 9999;
        width: 60px;
        min-height: 40px;
    }
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[cdarcy]

Hi,

It would like me click the Murdock Trusses drop down - video attached.

Thanks

[nabeel]

Hey Conor,

I went ahead and added the following code in the Theme Options > JS

jQuery(document).ready(function($){
	$('.x-sub-toggle').on('touchend', function(e) {
		e.preventDefault();
		$(this).parents('.menu-item-has-children').find('#x-nav-wrap-mobile-sm-0').toggleClass('x-collapsed');
	});
});

This seems to have fixed the issue. Please clear your mobile browser’s cache and test the menu.

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Let us know how this goes!