Ubermenu Not displaying correctly on mobile

[jeffrey_hodson123]

Hi,

I have added the ubermenu to my site and it is working perfect viewing on desktop, I am also very happy with the menu on the mobile except for one issue. When opening the Support dropdown on mobile the bottom main header shows but the links below the helpdesk tab are hidden from view on mobile.

I have searched high and low and i have tried everything i can see to do, would it please be possible to assist me with this. I am going to be adding more pages and the way it is now i think they will eventually not show on mobile too.

If you cannot help if you can please guide me in the direction where i can get help.

The website in question is www.cretronix.co.uk

Thank you very much.

Jeff

[ruenel]

Hello Jeff,

Thanks for writing in! I am not seeing the Ubermenu in your site:

It seems that it is disabled on smaller screens. Go to Appearance > UberMenu and check the setting:

If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[jeffrey_hodson123]

Hi,

Thank you for your reply to this issue im having, the menu is definitely active on my end. Im able to edit and change the menu with the end results showing on mobile.
Please see screenshot below of error, when I expand the menu and then expand the support tab I am not able to see the site links below helpdesk.

If you would not mind having a look to see what the error is for me, thank you so much. I hope I am entering the login details below correctly, if not please let me know.

Summary

website: www.cretronix.co.uk
username: themeadmin
Passw0rd: Nimnol123
Role: Admin

[marc_a]

Hi @jeffrey_hodson123,

The reason why the help disk on your ubermenu is not showing properly on your mobile because the menu is too long and can’t accommodate with the basic height of mobile phone. I suggest that you set a height of your ubermnu in mobile and make it scrollable. Please check the CSS code below for reference and add it in Pro > Theme Option > CSS

@media screen and (max-width: 959px)
.ubermenu-responsive-default.ubermenu-responsive .ubermenu-item.ubermenu-active>.ubermenu-submenu.ubermenu-submenu-type-mega {
    height: 300px;
    overflow-y: scroll;
}

Just change the height value to your desire height. Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

Thank you.

[jeffrey_hodson123]

Hi,

Thank you for your help, I played with the code and got it to look how I wanted.

Thank you.

[jeffrey_hodson123]

Hi,

Sorry I have one more question, would it be possible to change the css code you gave to only work on mobile?

Thank you. As it makes the menu bigger on the desktop.

Thank you.

[tristup]

Hi @jeffrey_hodson123,

You need to adjust the media screen size in the CSS code, please try the following code.

@media (max-width: 480px)
{
    .ubermenu-responsive-default.ubermenu-responsive .ubermenu-item.ubermenu-active>.ubermenu-submenu.ubermenu-submenu-type-mega 
    {
        height: 300px;
        overflow-y: scroll;
    }
}

You can also find the details on the custom media query breakpoints in the following articles:

1. https://medium.com/@uiuxlab/the-most-used-responsive-breakpoints-in-2017-of-mine-9588e9bd3a8a
2. https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp

Thanks

[jeffrey_hodson123]

That has worked perfect, thank you for the help.

[friech]

We are delighted to assist you with this.

Cheers!