Adjusting the search bar

[CreatorTim]

Hey, I need help adjusting the search bar.

This is what mine looks like:

And I want it to look like this:

So here’s what I want:

1. I want to move the entire search bar below the header so that the header is still visible.

2. I want to make it smaller, roughly the size shown in the picture, remove the borders, and fill it with a light gray color.

3. The last and most important thing is that I want a smooth slide-in and slide-out animation for it. You can check the kind of animation I mean here when you click on the magnifying glass icon: https://tomnoske.store/

That’s all, I don’t need the browse categories.

Here is my store URL: https://1049xn-ya.myshopify.com/

And here’s the store where I want it to look like: https://tomnoske.store/

Thanks a lot,
Tim

[DaisyVo]

Hi @CreatorTim

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

label.field__label {
    display: none !important;
}
input#Search-In-Modal {
    padding: 0.8rem 9.8rem 0.8rem 2rem !important;
    background: rgba(0, 0, 0, 0.2);
}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.