Displaying the search box in mobile menu width of Essence Pro

[lvvvvvl]

Hey,

I really like the Essence pro theme though the one thing I'd like to see is the ability to have the search box nicely fit into the mobile/tablet navigation.

I thought an alternative would be to use the MegaMenu.com plugin I'm using now but would have no clue as to how to implement it into this theme and I doubt it would flow as nicely as the native one does.

Are there any tutorials or something out there on how this could be done?

Thank you

[Brad Dalton]

Where exactly in the mobile navigation drop down menu did you want to position the search box?

---

Tutorials for StudioPress Themes & WooCommerce.

[lvvvvvl]

Hey Brad,

Love wpsites, it's been very useful. I think it would look best at the very top of all the navigation links. What do you think?

[Brad Dalton]

Thanks for the positive feedback.

I think you would need to add it in the drop down menu before the menu items.

I know its fairly easy to add it to the menu using code like this https://my.studiopress.com/snippets/nav-extras/

You could then use media queries to hide it so it only displays on smaller screens.

Foodie Pro uses this method which you could look at and then modify so the search is added before the drop down rather than after it as is the default.

Not a 2 minute job but very good question.

---

Tutorials for StudioPress Themes & WooCommerce.

[graceg]

Thanks for that tip! However, I need help in the code to set the search box to appear only on mobile version of the website...

Where do I put the @mobile query?

Thank you in advance!!

[Brad Dalton]

Link to your site please.

Which theme are you using?

---

Tutorials for StudioPress Themes & WooCommerce.

[Author]

Posts