Mega menu mobile

Hey Marco,

The mega menu does not work on mobile devices no, that is correct. I’m not sure I understand the second part of your post though, could you post a link to where we can see the problem?

Best regards,
Rikard

Hi,
Sorry for the late reply, thanks for the screenshot, you can create this with a blog post element for each category and choose “List layout – simple” but it will still show the meta data for each post which could be hidden with css if you wish. For example:

Best regards,
Mike

Hi,

Thank you for the update.

Can we see the actual site? We would like to check how the menu is setup currently. Please provide the link in the private field. Are you using the mega menu option?

Best regards,
Ismael

Hi,

Thank you for the update.

The images in the menu seem to be displaying properly now. If you require further assistance, let us know.

Best regards,
Ismael

Hi,

Thank you for the update.

1.) You can set the mobile menu to display earlier or when the screen width is equal or less than 1024px, instead of adjusting the logo.

@media only screen and (max-width: 1024px) {
.ubermenu-responsive.ubermenu-responsive-collapse {
    max-height: 0;
    overflow: hidden !important;
    visibility: hidden;
}

.ubermenu-responsive.ubermenu-responsive-collapse:not(.ubermenu-in-transition) {
    border-top-width: 0;
    border-bottom-width: 0;
}

.ubermenu-responsive-toggle {
    display: block;
}

.ubermenu-skin-blue-silver.ubermenu-responsive-toggle {
    margin: -63px 10px 0px 0px;
}
}

2.) You will need to contact the plugin developer for that. Unfortunately, we are not that familiar with their code.

Best regards,
Ismael

Hi,

Thank you for the update.

1-2.) The suggested code above almost amounts to nothing if you’re worried about its size, so it will not affect the page speed. It’s going to display the mobile menu when the screen width is equal to or less than 1024px — changing the breakpoint. Did you try it?

Please post the login details in the private field so that we can test it. You should also contact the plugin authors for additional help because we don’t usually provide support for third party plugins.

Best regards,
Ismael

Hi,

Thank you for the update.

We removed an invalid comment line from the Quick CSS field and added the css code that we suggested above. This is how the site should look on iPad view now.

Screenshot: <https://imgur.com/a/8EB5cGF

Best regards,
Ismael

Hi,

Thanks for the screenshot.

We fixed that particular issue by including this css code.

.ubermenu-responsive.ubermenu .ubermenu-nav {
    display: block;
}

.ubermenu-responsive.ubermenu-responsive-single-column .ubermenu-item-level-0 {
    float: none;
    clear: both;
    width: 100%;
}

.ubermenu-responsive-toggle {
    display: block !important;
}

This is how it should look now.

Screenshot: https://imgur.com/a/d5yauI6

For further modifications, please contact the plugin author.

Best regards,
Ismael

Hi,

Thank you for the update.

We adjusted the breakpoint to 1366px to prevent the menu from going below the logo. That’s the easiest workaround that we can think of. Unfortunately, we can’t modify the main style of the menu, so you need to contact the plugin developer for that.

This is the css code:

@media only screen and (max-width: 1366px) {
.ubermenu-responsive.ubermenu-responsive-collapse {
    max-height: 0;
    overflow: hidden !important;
    visibility: hidden;
}

.ubermenu-responsive.ubermenu-responsive-collapse:not(.ubermenu-in-transition) {
    border-top-width: 0;
    border-bottom-width: 0;
}

.ubermenu-responsive-toggle {
    display: block;
}

.ubermenu-responsive.ubermenu .ubermenu-nav {
    display: block;
}

.ubermenu-responsive.ubermenu-responsive-single-column .ubermenu-item-level-0 {
    float: none;
    clear: both;
    width: 100%;
}

.ubermenu-skin-blue-silver.ubermenu-responsive-toggle {
	top: 20px;
	position: relative;
}

.ubermenu-responsive-toggle {
    display: block !important;
}

.ubermenu-responsive.ubermenu-responsive-collapse {
	display: none !important;
}
}

Best regards,
Ismael