Dawn theme search bar transperent !

[Sohan2198]

hello how can i make my search bar like this

mine looks like this right now !

[BSS-TekLabs]

Hi @Sohan2198,

Could you kindly provide us with your store URL and the protected password (if applied), so that our team can offer you the necessary support?

[Sohan2198]

Url: https://www.zisthi.com/
pass:Zisthi0206

[BSS-TekLabs]

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the base.css (or theme.css, custom.css) file.

3, Paste the code snippet provided below at the bottom of the file, then save your changes.

form.search.search-modal__form .field:after {
    box-shadow: none !important;
}

Here is the result

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

[Sohan2198]

like this
search baar in center

[BSS-TekLabs]

Here is the code you can use to move the search box to the center

form.search.search-modal__form .field:after {
    box-shadow: none !important;
}

form.search.search-modal__form .field input:focus {
    box-shadow: none !important;
}

@media screen and (min-width: 990px) {
    form.search.search-modal__form .field .search_input.field_input {
        background: transparent;
    }
    
    form.search.search-modal__form {
        position: relative;
        right: 27vw;
    }
}

@media screen and (min-width: 1200px) {
    form.search.search-modal__form .field .search_input.field_input {
        background: transparent;
    }
    
    form.search.search-modal__form {
        position: relative;
        right: 320px;
    }
}

Here is the result

[Sohan2198]

show 2 close button

[Sohan2198]

Mobile View right now

make like this

[Aatiqa]

Hello! @Sohan2198 

I hope you're doing well. Kindly share your website URL and Password (if enabled) and I would be more than happy to help you out!

Kind Regards,
Aatiqa

[Sohan2198]

Url: https://www.zisthi.com/
pass:Zisthi0206

[Aatiqa]

Hello! @Sohan2198 

Kindly, follow the below steps to fix your problem:

1) From your Shopify admin dashboard, Go to Online Store
2) Choose the theme which you wanna edit and click on Edit Code
3) Add this code in the end of theme. liquid file above </body>

<style>

form.search.search-modal__form .field:after {
    box-shadow: unset !important;
}

</style>

Result: 

if I was able to help you and my solution worked well for then, please don't forget to Like it and Mark it as Solution.

Best Regards,
Aatiqa

[Sohan2198]

Mobile View right now

make like this

[Moeed]

Hey @Sohan2198 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
form.search.search-modal__form .field:after {
    box-shadow: unset !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Sohan2198]

like this

search bar center