Dawn theme search bar transperent!

Shopify Discussion
,
1

hello how can i make my search bar like this

1.jpg
1.jpg1904×192 14.1 KB

mine looks like this right now !

Untitled.jpg
Untitled.jpg1902×174 13 KB

2

@MinhajAhmed106 I can help you. And can you give me your store’s link?

3

i cant im not allowed

4

@MinhajAhmed106 I mean your website link.

5

https://www.mintstore.pk/

6

Hi @MinhajAhmed106

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings

.search-modal.modal__content { top: 100% !important; }

Screenshot 2024-07-01 at 13.55.18.png
Screenshot 2024-07-01 at 13.55.18.png1514×356 191 KB

7

it doesnt work !

8

Did you reload your page to check after adding the code?

9

i wanna make that search black border to transparent !!!

10

Code update

.search-modal.modal__content { top: 100% !important; }
.search-modal.modal__content .search-modal__form { max-width: 100%; }
.search-modal.modal__content .search-modal__form .field input,
.search-modal.modal__content .search-modal__form .field:after { box-shadow: unset !important; border: unset !important; }
11

thanks !! how can i move the search icon in the bar to the left while making search text font bigger and in capital

12

Hi @MinhajAhmed106

Please update the code

.search-modal.modal__content { 
    top: 100% !important; 
}
.search-modal.modal__content .search-modal__form { 
    max-width: 100%; 
}
.search-modal.modal__content .search-modal__form .field input,
.search-modal.modal__content .search-modal__form .field:after { 
    box-shadow: unset !important; 
    border: unset !important; 
}
.search-modal.modal__content .search-modal__form .field input {
    text-transform: uppercase;
    font-size: 2rem;
}
.search__button {
    right: 100% !important;
}
13

it doest move to left… thanks how do it increase the font size of SEARCH FOR… Text so it can be in the middle of search icon

Untitled.jpg
Untitled.jpg1908×158 6.73 KB