Venture Theme - Move mobile search bar underneath the header

Technical Q&A
1

Is there any way to move the search bar on mobile devices so that it’s always visible? My customers have told me that a lot of times they just want to search for products without clicking on the menu. How can I get the mobile search bar so its always visible on the mobile homepage instesd on collapsing into the menu? I feel it’d be better if it’s always visible since it’s a store and UX + ease of use is my #1 priority with my store.

2

Hi,
Edit the theme files (Venture theme) and open the header.liquid file
Find the ‘drawer__search’ class.
Cut the all form code like

{% include 'icon-search' %} {{ 'general.search.submit' | t }}

Paste the code above of ‘

’ div.

And add the css code in theme.scss.liquid file

@media only screen and (min-width: 750px){
form.drawer__search {
display: none;
}
}

Thanks.

3

Beautiful! Thank you. Worked out exactly how I was picturing. Much appreciated!

4

Thank you so much for this! Is there a way to move it just below the the header?

Screenshot_20200229-100024.png
Screenshot_20200229-100024.png996×2048 231 KB

5

I want to do same thing in Shella theme. Can you suggest me what should i do for that..mobile view search

6

@KuldeepKumar20 I am having a similar issue, but it happens on my desktop and mobile. When you open the search bar you can’t click on it or close it, I am guessing is because it is too close to the header.

How can move it down so when I click on the search icon it opens under the header?

https://newdaysports.com/pages/shop

pw: CoschStudio

Thanks so much!

7

Thanks!

This worked perfectly! I have a question - is it possible to move i to the bottom of the mobile screen, always visible?

This would make it more easy to search for the customer

Hope you can help. Thanks

Eirik

8

Hi I tried this however i lost you on the second step? “And add the css code in theme.scss.liquid file” where do you add it as I pasted it at the top and it didnt work?