Add search icon/bar to header on Narrative theme

Solved
tompa
Tourist
8 1 5

As the title says. Anyone figured out a way this can be done? I've searched the forum but haven't found any answers.

Replies 16 (16)
Emmaco
New Member
1 0 0

Hello @tompa ,

I followed all the steps but I would like to change a small (not so small detail). I wish for the navigation search to be in the sticky header, at the same level of the burger menu, the title and the cart item and therefore to follow the same behaviour. Could you please help me with this ?

Thank you very much,
Emma 

PerspectiveWeb
Excursionist
12 0 6

Paste this above line 217 in the header.liquid tab.

 

 <div class="input-group__btn">
        <a href="/search" class="btn btn--clear btn--square">
          <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 21.4 21.4"><path fill="#444" d="M13.4 0c-4.4 0-8 3.6-8 8 0 1.8.6 3.5 1.7 4.9L0 20l1.4 1.4 7.1-7.1c1.4 1.1 3.1 1.7 4.9 1.7 4.4 0 8-3.6 8-8s-3.6-8-8-8zm0 14c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"></path></svg>
          <span class="icon__fallback-text">Search</span>
        </a>
      </div>
moodnz
New Member
1 0 1

Hi there

 

my site https://mood.nz/ is not getting this to work. I added the section in line 86 but the height of the header goes bigger and the search bar comes up as black (not white)

 

Any help is appreciated.

 

Kind regards

James

 

KetanKumar
Shopify Partner
24945 2500 9043

@moodnz 

sorry for that issue 

i can't see any search bar code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
h_bulfield
New Member
1 0 0

I've tried adding the search bar into my site, however it comes up with this error. Liquid error (sections/header.liquid line 442): Could not find asset snippets/search-bar.liquid

 

Any ideas on what to do?

KetanKumar
Shopify Partner
24945 2500 9043

@h_bulfield 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mayuum
New Member
2 0 0

This worked perfectly on my client's Narrative theme. Thank you so much for sharing this!!