Add a search button on mobile header - Brooklyn

Solved
Will_Letts
Excursionist
13 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)

Accepted Solutions
Will_Letts
Excursionist
13 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 6 (6)
dmwwebartisan
Shopify Partner
9731 2225 3053

@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 | Bag is a cart drawer that maximizes your sales. View app →
Will_Letts
Excursionist
13 1 1
dmwwebartisan
Shopify Partner
9731 2225 3053

@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 | Bag is a cart drawer that maximizes your sales. View app →
Will_Letts
Excursionist
13 1 1

Theme ZIP attached. 

 

Will. 

Will_Letts
Excursionist
13 1 1

Hi @dmwwebartisan 

Did you manage to take a look at this? 

Thanks in advance, 

Will. 

Will_Letts
Excursionist
13 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