Venture Theme - Move mobile search bar underneath the header

Solved
Highlighted
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.
0 Likes
Highlighted
Trailblazer
193 25 47

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
Highlighted
Shopify Partner
6 0 4
Beautiful! Thank you. Worked out exactly how I was picturing. Much appreciated!
Highlighted
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

0 Likes
Highlighted
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

0 Likes
Highlighted
Explorer
51 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!

0 Likes