Can I move the hamburger menu to the left of the logo, in mobile view?

Hi Boppar,

To do that you would need to use CSS to hide the current site logo. Then you would need the Pro version to add a Logo block directly to the toggle bar, using the toggle bar designer:

https://www.megamenu.com/documentation/mobile-toggle-blocks/

Regards,
Tom

Hi @megamenu

Thanks for your reply. Two questions:

1. If I instead would like to have the hamburger menu on the right side and the logo on the left side (in mobile view), can this be done with the free version?

2. If I’m not mistaken the default version of Storefront has the hamburger menu on the right side of the logo. Would it be possible to disable Mega Menu only in mobile view and achieve this?

Hi boppar,

1. It would require custom CSS, which is not covered under free support sorry. You could ask a freelancer to help you.
2. I’m afraid not, when MMM is enabled, it must replace both the desktop and mobile menu.

Regards,
Tom

@megamenu
Hi Tom!

I think there might be a misunderstanding.

I want it to look like in your MMM demo:
https://ibb.co/QmfkPCj
The logo and the mobile hamburger menu on the same row (next to each other).

Instead of having the mobile menu below the logo:
https://ibb.co/yp7nNGh

I don’t need to have the logo and the mobile menu next to each other. I just need them on the same row. This is how it looks like in your demo.
How can this be done?

It seems like my mobile menu is getting “pushed down” below the logo.

P.S In mobile view I don’t have a search bar in the header.

• This reply was modified 4 years, 2 months ago by boppar.

Hi boppar,

On megamenu.com, we’re using the Pro version to add a logo to the toggle bar, which is why it appears on the same row as the hamburger.

With storefront, it shows below the logo (as the logo is from the theme, and the hamburger is from Max Mega Menu).

Regards,
Tom

@megamenu
Hi Tom.

Would this solve my problem?
1. Install a mobile plugin like Responsive Menu.
2. Configuring mobile menu plugins to work with Max Mega Menu
https://www.megamenu.com/documentation/configuring-mobile-menu-plugins/

Hi boppar,

It is worth trying that yes.

Regards,
Tom

Hi @megamenu
Tom, I got this code:
@media screen and (max-width: 768px){
.woocommerce-active .site-branding {
position: absolute;
top: 15px;
left: 140px;
}

.storefront-primary-navigation {
padding-bottom: 15px;
padding-top: 15px;
}

#mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open + #mega-menu-primary {
margin-top: 25px;
}
}

With this code the menu moves to the right of the logo, like I want. Unfortunately there is a problem. In mobile view when clicking the logo I’m supposed to go to the main page. Instead when clicking the logo the menu opens. Like the logo is a part of the menu.
https://ibb.co/xgjFTQc

Do you have any solution?

Hi boppar,

Try changing this bit:

.woocommerce-active .site-branding {
position: absolute;
top: 15px;
left: 140px;
}

to

.woocommerce-active .site-branding {
position: absolute;
top: 15px;
left: 140px;
z-index: 9999999;
}

Regards,
Tom

@megamenu

Tom, that worked great.
I guess there is no longer any need for a second plugin to handle the mobile menu issue. Your plugin works well on mobile as well.

I still have one issue: On mobile, when opening the menu there is an image behind the menu, with palmtrees. This image is from my header. The problem is when opening a submenu, the long menu makes the image behind the menu becomes several images stacked on each other which looks weird.
I have attached an image that explains the problem: https://ibb.co/WzLsgLC
What could be a solution to this problem? When menu is open, can the image only be displayed once?

Hi boppar,

Try enabling the “Overlay content” option under Mega Menu > Menu Themes > Mobile Menu.

Regards,
Tom

@megamenu

Thanks, Tom. That solved the problem.
Great support!