FROM CACHE - en_header

Venture Theme - Move mobile search bar underneath the header

Solved
gratschultz2013
Shopify Partner
6 0 4
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.
Accepted Solution (1)

Accepted Solutions
SWSolutions
Shopify Partner
219 29 56

This is an accepted solution.

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

<form action="/search" method="get" class="drawer__search" role="search">
<input type="search" name="q" placeholder="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}" class="drawer__search-input">

<button type="submit" class="text-link drawer__search-submit">
{% include 'icon-search' %}
<span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
</button>
</form>

Paste the code above of '<div id="NavDrawer" class="drawer drawer--left">' div.

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


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

Thanks.

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: silencewebsolutions@gmail.com

View solution in original post

Replies 7 (7)
SWSolutions
Shopify Partner
219 29 56

This is an accepted solution.

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

<form action="/search" method="get" class="drawer__search" role="search">
<input type="search" name="q" placeholder="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}" class="drawer__search-input">

<button type="submit" class="text-link drawer__search-submit">
{% include 'icon-search' %}
<span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
</button>
</form>

Paste the code above of '<div id="NavDrawer" class="drawer drawer--left">' div.

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


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

Thanks.

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: silencewebsolutions@gmail.com
gratschultz2013
Shopify Partner
6 0 4
Beautiful! Thank you. Worked out exactly how I was picturing. Much appreciated!
jamesandjames
New Member
1 0 0

Thank you so much for this! Is there a way to move it just below the the header?Screenshot_20200229-100024.png

Taimoor1122
New Member
1 0 0

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

NDS
Explorer
55 1 8

@SWSolutions 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!

maxlime
Excursionist
13 0 3

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

julz777
New Member
1 0 0

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?