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
Trailblazer
199 27 52

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 6 (6)
SWSolutions
Trailblazer
199 27 52

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

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
Tourist
5 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