-
Hello, I have gone to appearance – layout – header but I can’t seem to be able to do this.
I’m happy with my header appearance in the desktop version. For the mobile header, I’m looking to have the logo in the middle, hamburger menu with categories on the left, search icon on the right.
Is there a way to do this?
Many thanks -
Hi there,
Can you link us to the page with the activated mobile header option?
You can use the private info field.
I’m not sure what you meant by “hamburger menu with categories on the left”.
Thanks!
-
Thanks, I have added a temporary link.
What I meant is: categories menu (displayed as an icon of three horizontal lines) on the left, logo in the middle, search on the right. -
Hi there,
You can use this CSS:
.site-logo.mobile-header-logo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); } #mobile-header .menu-toggle { order: -1; margin-right: auto; } -
Many thanks for your reply. This has put the menu on the left, but with the word ‘menu’ next to the 3 lines – I don’t need that. My logo is in the middle but it has been distorted. And there is still no search bar on the right side. Anything else I can try?
-
Sorry when I said search bar, I meant just the magnifying glass icon on the right.
-
To remove the ‘MENU’ label, go to Customize > Layout > Primary Navigation. Make sure the
Mobile Menu Labelfield is empty.Scroll down in the same panel and check the Enable Search Navigation Modal option to add the search icon.
-
Thank you so much!
Any ideas why my logo ratio is distorted? It’s squeezed horizontally. -
You can add this CSS to fix the distorted logo:
.mobile-header-navigation .site-logo.mobile-header-logo img { height: auto; }
- You must be logged in to reply to this topic.