What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Add a search button on mobile header - Brooklyn

Solved

Add a search button on mobile header - Brooklyn

Will_Letts
Excursionist
14 1 1

I've trawled the community posts and can't see a solution for this. Apologies if this is already covered. 

On desktop and mobile landscape, my site shows three icons to the right of the logo - Login, Search, Cart. 

On mobile portrait, it only shows the Cart icon. 

I know the space is reduced in portrait, but is it possible to show Search and Cart? There looks to be enough room. 

Here's the current header on portrait:

IMG_4774.jpg

Here's the current header on landscape:

IMG_4775.jpg

Thanks in advance for any help anyone can offer! 

Will. 

 

Accepted Solution (1)
Will_Letts
Excursionist
14 1 1

This is an accepted solution.

In case anyone is looking for a solution to this, I worked it out. 

Just add the following code to your header.liquid file right below <div class="site-nav--mobile text-right">

<a href="{{ routes.search_url }}" class="site-nav__link site-nav__link--icon{% if search_modal %} js-toggle-search-modal{% endif %}" data-mfp-src="#SearchModal">
                      <span class="icon-fallback-text">
                        <span class="icon icon-search" aria-hidden="true"></span>
                        <span class="fallback-text">{{ 'general.search.title' | t }}</span>
                      </span>

View solution in original post

Replies 7 (7)

dmwwebartisan
Shopify Partner
12323 2552 3732

@Will_Letts 

Please share store URL.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Will_Letts
Excursionist
14 1 1

Hi ,

It's www.snack-box.co.uk

 

Thanks, Will. 

dmwwebartisan
Shopify Partner
12323 2552 3732

@Will_Letts 

This is code customization work . i will try to solve your problem  please share your theme zip file 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Will_Letts
Excursionist
14 1 1

Theme ZIP attached. 

 

Will. 

Will_Letts
Excursionist
14 1 1

Hi @dmwwebartisan 

Did you manage to take a look at this? 

Thanks in advance, 

Will. 

Will_Letts
Excursionist
14 1 1

This is an accepted solution.

In case anyone is looking for a solution to this, I worked it out. 

Just add the following code to your header.liquid file right below <div class="site-nav--mobile text-right">

<a href="{{ routes.search_url }}" class="site-nav__link site-nav__link--icon{% if search_modal %} js-toggle-search-modal{% endif %}" data-mfp-src="#SearchModal">
                      <span class="icon-fallback-text">
                        <span class="icon icon-search" aria-hidden="true"></span>
                        <span class="fallback-text">{{ 'general.search.title' | t }}</span>
                      </span>
pinktoeshairbow
Tourist
4 0 4

Hi there, I know this thread is old, but i used this solution and it worked, but the search is on the left in an odd spot, is it possible to be to the right next to the cart button,or is this not possible? thanks so much