[Resolved] Navigation Showing on Mobile Instead of Being Contained In the Hamburger Menu

[Myles]

I’m working on moving and entire website from Genesis to GeneratePress.

I’m redoing the header and navigation, and everything seems to look ok on desktop. However, on mobile with the mobile header activated, my main navigation shows up along with my mobile logo and the hamburger menu. Why doesn’t my navigation appear within the hamburger menu (after someone taps it)?

Currently, when the hamburger menu is tapped, it just turns into an X. There is no navigation contained within.

Can you please advise?

[David]

Hi there,

so thats the max mega menu plugin you’re seeing there.
Does it have Mobile Responsive settings ?

[Myles]

Thanks, David. It was the plugin.

I am running into a couple of issues with the mobile header and navigation still.

1) The mobile header/navigation when viewed through the customizer in WordPress does not look the same on the actual site itself (staging site to be exact).

For example, I have GP’s mobile header turned off, and in customizer, all pages including the home page look close to what I would like. However, when viewing the staging site on an actual phone, all pages have the correct header and navigation combo, but the home page appears as if GP’s mobile header function is turned on–but it isn’t.

Can you please advise?

2) I have looked in WordPress and in the Max Menu Plugin, but do not see how I can I get the hamburger menu center aligned above the head logo? If you look at any inner page on the staging site on mobile, you will see the hamburger menu appears on the top left of the screen. how do I move this to the center? Thanks!

[Ying]

1) This is very weird, the mobile header is activated on the homepage but not on the other pages.

Can you try disabling the menu plus module at appearance > GeneratePress, then activate it back?

2) Try this CSS:

@media (max-width: 768px) {
    #mega-menu-wrap-primary {
        margin-left: auto;
        margin-right: auto;
    }
}

[Myles]

Disabling and activating didn’t seem to do anything.

Also, after adding the CSS, in customizer everything looks good.

On the live, staging site, it does not match the customizer. the hamburger menu is not centered and both on the homepage and inner pages, instead of the word “Menu” appearing next to a hamburger menu, the text “MENUMENU” shows up.

Please advise, thanks.

[Ying]

If the live site doesn’t match the customizer, it’s likely a cache issue, do you have server-level cache enabled?

[Myles]

Great, thanks! Things seem to be working properly now after turning server-level caching off.

[Ying]

Glad to hear that 🙂

[Author]

Posts