[Resolved] How to add search bar to mobile bar (primary navigation)

[Amit]

Hello
I am new to GP, so forgive me if this has been asked. I have searched the forums, but am unable to locate the answer to my question.

I would like the following layout:

Logo – Search Bar (not just the magnifying glass) – Hamburger Menu

How do I get the Search Bar to show up? I have GP Premium. I understand I can enable Navigation Search from Customize->Layour->Primary Navigation. But that only adds the magnifying icon and it appears to the right of the hamburger menu.

[David]

Hi there,

i see you have used the method provided here:

https://generatepress.com/forums/topic/customize-header-like-target-and-add-switcher-language/#post-1765401

If you can share a link to your site i will help with the other styling requirements

[Amit]

David
Thanks for the response. Yes, your method works well. I just need to understand how to position the Search Bar in the middle of the Logo and the Shopping Cart icon.
Here is the URL:
https://staging-tacknridercom.kinsta.cloud/

[Ying]

Hi Amit,

Try this CSS:

#mobile-header .aws-container {
    order: -1;
}

[Amit]

Hi Ying
That works!! Do you know of any resources that I can use for learning these CSS tricks?

David and Ying,
Thank you so much for your help!

[Ying]

I would recommend Codecademy personally.

This is where I learned CSS from 🙂

[Author]

Posts