[Support request] Search Feature as Last Menu Item on Mobile

[Nick]

Hey GeneratePressers,

I’m new to GP. Previously I was using Astra and there was an easy function to tick a box and make the search box appear as the last menu item on mobile. So, when the user clicks the hamburger drop-down menu on mobile, it would show all your menu items, then a handy little search box at the bottom of the list.

Currently, on all my sites using GP, the search icon shows up next to the hamburger menu which looks a bit cumbersome on small mobile screens.

I know this isn’t a normal feature, but is there an easy workaround without using a plugin or too much extra code/bloat for load speed?

Thank-you for any help!

[Ying]

Hi Nick,

Can you link me to your site so I can see your current header layout?
You can use the private info field for this.

Let me know 🙂

[Nick]

One of the sites I’m trying to do this on is https://www.intoflyfishing.com/

Thanks

[David]

Hi there,

you’re site is using the Off Canvas Panel, and in Appearance > Widgets you will see it has it own Widget Area. You can add a Search Block in there.

Then a little CSS to remove the search toggle from the mobile nav:

@media(max-width: 768px) {
    .main-navigation .menu-bar-item.search-item {
        display: none;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts