Archived topic
How to add search bar to mobile bar (primary navigation)
5 replies · Started by Amit on May 8, 2021
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.
Hi there,
i see you have used the method provided here:
If you can share a link to your site i will help with the other styling requirements
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/
Hi Amit,
Try this CSS:
#mobile-header .aws-container {
order: -1;
}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!
I would recommend Codecademy personally.
This is where I learned CSS from :)
