[Support request] Make Search Icon Appear Inside Mobile Menu Slide-Out

[Bettijo]

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?

[Bettijo]

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

[David]

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.

[Bettijo]

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!

[David]

Can i see the site, so i can see what layout is used ? I can then provide a little code to remove it.

[Bettijo]

Sure! It is https://lifelovezen.com/

[Elvin]

Hi there,

We can hide mobile header’s search icon by adding this css:

#mobile-header .mobile-bar-items {
    display: none;
}

[Author]

Posts