Move hamburger menu to left side in mobile view

Support
#1

Hello,

I used a custom menu to create my logo in the center of nav bar but when it goes into responsive mode the disappears. Which I wanted it to do because otherwise it would just appear as a link.

I’m wondering if there’s a way I can move the hamburger menu to the left when in responsive view and still have my logo centered over the hero image?

Here’s my url for reference.
http://chloeatscout.com/

Thank you in advance!

#2

Hi,

Regretfully this could only be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

#3

Would you be able to refer me to someone that could assist with this?

#4

Hi There,

While that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

You can float the mobile menu button with the following custom CSS.

a[data-target=".x-nav-wrap.mobile"] {
	float: left;
}

With regards to your custom menu (inline menu), you know that the inline menu will be hidden on mobile right, so that hides your logo as well. What you need to do is add another logo outside the navbar and hide this second logo on desktop and show it on mobile. You can do that by adding the CLASS x-hide-lg x-hide-xl to your second logo.

Then apply the necessary custom CSS to properly position your second logo on mobile.

Hope this helps,
Cheers!

1 Like
#5

Thank you! I will try this out

#6

You’re most welcome!