[Resolved] How to place the search icon into the menu?

[Edin]

I’ve removed the search icon via customizer. Is there still a way to add it to the top of menu?

On mobile: the user clicks the hamburger menu on mobile, and the search icon is at the top.

On desktop: the search icon is at the end of the menu

Thank you in advance,
Edin

[David]

Hi there,

It maybe possible but its a terrible UI as the user has to click 2 x icons in mobile to get to the search field so 3 taps in total, and that could lead to some issues with closing the menu.

What if you use the Off Canvas Panel on mobile and add a Search block to the Off Canvas Widget area ?

[Edin]

Omg David, that’s even better. Thank you!

That’s the problem when you had customized your GP a long time ago… you have no idea what cool stuff was added in the meantime.

Thanks,
Edin

[David]

More info on Off Canvas here:

https://docs.generatepress.com/article/off-canvas-panel-overview/

Let us know if you need any assistance with setting it up with the search widget.

[Edin]

Thank you, David. I’ve managed to get it done. The only little thing is that the search button is not visible (it goes out of the box to the right.

Thanks,
Edin

[Ying]

Hi Edin,

Try adding this CSS:

nav#generate-slideout-menu  * {
    max-width: 265px;
}

nav#generate-slideout-menu aside#block-3 {
    margin: 0;
    padding: 20px;
}

[Edin]

Perfect. Thank you so much. You guys are fantastic!

[Ying]

You are welcome   🙂

[Author]

Posts