How to make always visible search bar on Crave Theme

Shopify Discussion
1

How do I make an always visible search bar on the crave theme?

2

By always visible, do you mean that you want the navigation menu to be fixed to the top of the page, where customers can easily access the search bar?

If not, what exactly do you mean? Thanks.

3

Yes, that is kinda what I mean, if I’m understanding you correctly.

Instead of there being that little magnifying icon, I want it to always be open, like how it would be on Amazon.

4

So instead of just the icon, you want the white bar, like how Amazon has it here: https://www.amazon.com/ ?

If so, this will involve customizing the code of your navigation bar. You’ll have to remove the modal that pops up when you click the search bar, and instead copy the search bar code and paste it into the header, allowing it to show.

Then, you’ll have to edit the styles to make it look how you want it to.

Do you have experience editing code on Shopify? If so, I can walk you through it.

5

I have some experience coding in shopify. I would really appreciate if you could walk me through it.

6

I don’t know how your store is set up, but here’s what I would try:

  1. Make a copy of the current header and save it as a backup.
  2. On one of the copies, copy everything in the class="search-modal__content search-modal__content-bottom div.
  3. Comment out the class=“search-modal modal__content gradient” div to remove the modal.
  4. Paste the class="search-modal__content search-modal__content-bottom code under the class=“list-menu list-menu–inline” code.
  5. The styles might be a little messed up, but you should see the search bar. From there, you’ll have to adjust the styles.

Let me know if this works. Thanks.

7

Ok thanks, your solution worked, but I got another small issue. The original search bar, aka the magnifying glass, is still there. How do I get rid of it? Also if you can, please tell me how to put the search bar below the main menu.

8

You’ll want to add display: “none” to the magnifying glass code to make it disappear.

As for the search bar, simply paste that code right under the class=“list-menu list-menu–inline” code.

Does this work?