Hamburger Menu disappeared

Hi, thanks for reaching out.

When able, please, check your Custom CSS. A rule has been inserted that is hiding the header within a media query.

Hope that helps.

If your intention was to hide the header on a particular page, please, see https://siteorigin.com/unique-page-styling-custom-css-body-classes/.

Andrew,
Thanks for your amazingly rapid response.
My Site Origin Custom CSS was as follows:
"/* Move menu below the masthead on all pages
* https://siteorigin.com/thread/how-to-move-menu-to-the-bottom-of-header-in-vantage/
*/
#site-navigation {
padding-top: 10px;
}
.main-navigation ul ul {
padding-top: 15px;
}"

This code has been in place since 2019 during most of which time the hamburger menu has worked fine but any way I’ve removed this and purged the cache but to no avail – any more suggestions?

Regards,
Richard

Hi Richard

Thanks for the update. When able, please, head over to Customize > Additional CSS and try there.

Andrews,
Many thanks for another quick and helpful response. I’ve been delayed in replying due to paying attention to the Prime Minister’s Covid broadcast!
I’ve found and commented out the code that you refer to and this has certainly fixed the problem with the mobile menu.
I’m uncertain now precisely what that section of code was originally intended to achieve but the page looks OK to me now!
Thanks again,
Richard

Glad to hear that helped. Thanks for the update.

Cheers for now.

Andrew

Andrew,
On further inspection I now find that the menu is fine on tablets and not only appears but expands as necessary, but on mobile phones while present the hamburger menu will not expand.
Any ideas?
Richard

To troubleshoot, try the following:

* Clear your caching plugin.
* Temporarily deactivate all plugins except for UberMenu.
* Does the issue persist in the above state?

Andrew,

Sorry for the delay in response but I’ve not been idle and have made a number of observations of behaviour via the new Trouble Shooting mode on WordPress.

No matter which plug-ins I disable (including with none enabled) I cannot get the mobile menu to expand in “phone” mode – tablet mode remains fine.

But I’ve realised that saying the menu does not work is not precisely what is happening – a thick black line below blue menu button does appear when the toggle is clicked but no menu items are listed below. So the button is responding but just not displaying the menu items.

I’ve also found that by switching on the default Twenty Twenty theme the menu does expand in mobile mode, although the Ubermenu “dynamic” items do not appear.

Regards,
Richard

Hi Richard

Thanks for the update.

You can try adding to Custom CSS:

@media (max-width: 959px) { 
	.main-navigation ul { 
		display: block !important;
	}

	.site-header .site-branding {
		width: 100%;
	}
}

I’m not immediately sure how to prevent the logo from dropping down with the menu. Is there perhaps an UberMenu setting to help with that, perhaps an absolute positioned option?

Andrew,

Great – thanks for the suggestion – I’ll give that a whirl tomorrow and let you know…

Regards,
Richard

Andrew,

Yes, your suggested code has enabled the menu to drop down but now I see what you mean about the logo dropping down with it – I’m investigating this.

But it’s fair to say that while the look is unappealing, from a functional perspective the menu is quite usable even on mobile phones – so thanks again for your efforts to date.

Regards,
Richard

Hi Richard

At Appearance > UberMenu you can try changing Responsive & Mobile > Mobile Menu Display to Modal and see if that works for you.

Or leave the setting as Inline and try:

@media (max-width: 959px) { 
    .site-header .site-header-inner {
        flex-direction: column;
    }

    .main-navigation {
        margin-top: 10px;
    }
}

After the next Corp update, please, re-check how this all looks on mobile. Thanks.

Andrew,

Brilliant thanks – this latest CSS code does indeed prevent the logo from dropping down with the menu. (I couldn’t find any option for setting the menu display to modal in the latest version of UberMenu 3.)

The only (minor) issue now is that the log expands when the hamburger menu appears, (i.e. in tablet and mobile mode) from the smaller size that appears on desktop.

Perhaps this will be fixed in the Corp update.

Thanks again for your persistence.

Regards,
Richard

Hi Richard

Thanks for the feedback.

In the UberMenu settings try doing an in-page search (Ctrl + F or CMD + F) and search for the word “modal”. You should find it.

You can set a max-width for your logo as follows:

.site-header .site-branding img {
    max-width: 50px;
}

Cheers

Andrew