Archived topic
Make Search Icon Appear Inside Mobile Menu Slide-Out
6 replies · Started by Bettijo on February 9, 2021
Hello! I would like to have the search function enabled, but on my mobile menu I want the magnifying glass icon/search function to be accessible inside the menu. So that all that shows up in the header is my logo and the menu/stacked bars icon. Then once you click it to access the mobile menu slideout, I would like the magnifying glass icon to be at the top before any of the links in my menu.
When I am in the Customizer and enable search, it places the magnifying glass icon next to the 3-bar menu icon, and I don't see a way to tell it to appear inside the menu the way I want it. Is there a way to make that happen?
Just to clarify -- I am fine with the way the magnifying icon appears on desktop next to all the menu items, but just on mobile, I would prefer for it to be inside the mobile menu slide-out
Hi there,
tricky one - as the Search Icon would trigger a separate event that doesn't work from within the off canvas.
But you can add a Search Widget to the Off Canvas panel - in Customizer > Widgets > Off Canvas.
That suggestion works great for mobile! Now I'm wondering if there is a way to turn the normal header search off for mobile, and just have it showing on Desktop? Thanks!
Can i see the site, so i can see what layout is used ? I can then provide a little code to remove it.
Sure! It is https://lifelovezen.com/
Hi there,
We can hide mobile header's search icon by adding this css:
#mobile-header .mobile-bar-items {
display: none;
}