The mobile menu button is working on mobile devices, but on a regular desktop or laptop when the browser screen is not wide enough to support the full length of the standard menu, the mobile button does not respond when clicked.
Is there a way to make it respond? Thanks!
Hello @fsyingc,
Thanks for asking. It looks like you have made changes related with the mobile menu breakpoint using custom code. I checked the website on Chrome emulator and don’t see any issues with majority of the screen resolutions and devices except iPad pro. I can replicate the issue of mobile menu not working on that. However please note that on iPad, X Theme will display full scale menu not the hamburger navigation. My recomendation would be not to play with view ports if you are not comfortable with CSS media queries and programming. In that regards I suggest to please remove the custom CSS code you have added. We have developed X Theme keeping various factors in the mind and view ports are a important factor in that process to keep uniformity.
Thanks.
Thanks for your response. If I don’t adjust the breakpoint for the mobile menu, the header turns into an ugly, large two-line stack on narrower browser windows rather than moving to the mobile menu when there isn’t enough room to fit the header links. It needs to go to a mobile menu earlier than the default for the theme.
What can be done to fix this other than adjusting the mobile break point? What CSS media queries should I add to make the menu work on regular desktop/laptop browsers?
Hi again,
To fix this, try adding the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript
jQuery(document).ready(function($){
$('.x-btn-navbar').click(function(){
if($(".x-nav-wrap.mobile").is(':visible')){
$('.x-nav-wrap.mobile').css({"display": "none", 'height': 'auto'});
}
else{
$('.x-nav-wrap.mobile').css({"display": "block", 'height': 'auto'});
}
});
});
Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!
Hi Nabeel - Thank you!
That worked in getting the mobile menu working in the browser but now when you expand it and expand a submenu like Services it only scrolls the content on the page and not the menu itself when it goes past the bottom of the browser window. What can be done to address this? I greatly appreciate your assistance!
Hey @fsyingc,
Further custom development from here would be getting outside the scope of our support. Please use UberMenu instead or you might want to hire a web developer to achieve your specific needs.
We do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at pinnacle@theme.co if this is of interest to you.
Thank you for your understanding.
Thanks for your response but this does seem like a failure in the theme to not have the mobile menu button working on standard desktop/laptop browsers when the menu button is required due to smaller widths. I discovered this issue while testing on a standard 13" laptop. The browser is not wide enough to support the full text of the menu and therefore must go to the mobile menu design. However, the mobile menu button does not respond to clicks or touch so users cannot use the menu at all and the theme and site seem broken as a result.
If there is anything that can easily be done to address this, I’d greatly appreciate it.
Hi there @fsyingc,
I’ve checked the site on my MacBook Pro 13" and everything looks good https://monosnap.com/file/jv0jUTQY8LS5hLZ53DxYrh2stiBgW6#
Are you viewing the website at the full viewport of the 13" Laptop?
Thanks!
Hi Jack,
I checked the site on a 13" HP Spectre laptop running Windows 10 in Chrome, Firefox, and Edge. All three look something similar to file attached securely here. The menu is not fully displayed and the mobile menu button does not respond. Thanks!
Hi again,
As you see this requires custom development and it’s not a default feature of the theme, this may cause issues that are unexpected and we won’t be able to support the issues caused by the above code we’ve provided.
With that being said I can point you in the right direction to fix your problem, since you’ve a fixed header in a desktop view opening a submenu will not show all the submenu items because of the fixed header behavior, you’ll need to change the fixed header to static header via Appearance > Customize > Navbar Position > Static Top this should solve the issue.
Again this is only the guide we’ve provided you as a custom code and we won’t be able to support the issues caused by this. I’d reccomend you to use Superfly plugin instead it does the same thing as well.
Hope this helps!