Mobile menu issues- clickability and break point

[Tierramitica]

Hello team,

My previous topic on this isssue was closed since I did not reply in time, but I am still facing the same issues after following the advice given. I realize it was my fault that I was not clear enough about what my issue was, so here it goes:

My website is www.tierramitica.com. If you go there, you will see that the mobile menu does not work very well. The menu items themselves are not clickable and you are forced to look to the side and see the little arrows and click on them to be able to browse to the menu.
I would like a solution for this, in whatever way possible: Either disable the mobile menu, so that only the desktop menu style works, or make the menu items clickable. Can you please help me out realizing this?

I have tried several codes so far, as I have mentioned in my previous post (‘Change breakpoint normal to mobile menu and clickability’, 13 days ago) and I also did the updates as Rue Nel suggested, but none of these actions have any kind of influence: the mobile menu keeps popping up at what seems like 890 pixels and the menu items of the mobile menu stay unclickable, with whatever code.

I do not know how to solve this, I very appreciate any help you can give me.

Thank you

[ruenel]

Hello There,

Thank you for the very detailed post information.

Please remove this custom JS code:

jQuery(document).ready(function($){
	$('.x-nav-wrap.mobile').css('height', 0);
});

And then please make sure that your href of the menu items is correct.
Adding #! is not proper. It should only be #.

Hope this helps. Please let us know how it goes.

[Tierramitica]

Hello Rue Nel,

Thank you for your answer.
I tried your suggestions and I deleted the jquery code, still the code is not working. I also tried cancelling any other code that might interfere, with no success.

I tried getting rid of the #! and replacing it with #, but that makes things worse: with only the #, the menu items do not open, but the page automatically scrolls up towards the top of the page, very annoyingly.

Any other ideas?

[nico]

Hi @Tierramitica,

The first suggested fix by Runel should be great. In this case, it would be best that you first backup site and create a staging site then share us the URL and admin credential of it so we could investigate and test further.

Don’t forget to set it in a secure note.

Thanks.

[Tierramitica]

Hello Nico! Thank you so much, I also realize that it should be working fine since it does for everybody else, so I do not understand it at all and it has been lingering on forever. I would really like to have this settled.
Thanks for this awesome support. I am adding the credentials in secure note

[christian]

Hey @Tierramitica,

The issue you described is the natural behavior of the mobile menu. It was designed to for the common menu setup where the parent menu links to a page and you need to click the arrows to reveal the sub-menu. In the Pro theme, you can create a custom header with the Navigation Collapsed element and choose whether or not clicking the parent menu will open the sub-menu. This is not available in X so I recommend that you upgrade to Pro.

If you wish to stay with X, I’ll show you some custom coding guidance that will achieve what you need. BUT, please note that issues that might arise from the use of this guide and further enhancements would be outside the scope of our support. Please add this code in Theme Options > CSS. It will expand the area of the arrow covering the parent menu link.

.x-sub-toggle {
    width: 100%;
    text-align: right;
}

.x-sub-toggle>span {
    padding-right: 10px;
}

You can see how that works here.

Hope that helps and thank you for understanding.

[Tierramitica]

That is exactly what I needed! It works like a charm! Thank you Christian!

[paul.r]

On behalf of my colleague, you’re welcome. Cheers!