Search bar is appearing on top of the navigation bar in Dawn Theme

Store Design
,
1

Hi ,

I am using Dawn Theme and search bar is appearing on top of the navigation bar both in destop & mobile view. I want search bar to appear under the navigation bar. Second issue when typing in search it all appears with transparent background and I want it with white background. Please advice how to fix these issues.

www.besteveters.com

2

Go to component-search.css and add the following code :

.search__input.field__input {
    padding-right: 9.8rem;
    background-color: #fff !important;
}
3

To reposition it, go to base.css and add the following:

.search-modal__content {
    display: flex;
    align-items: end !important;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 5rem 0 1rem;
    line-height: calc(1 + .8 / var(--font-body-scale));
    position: relative;
    margin-bottom: 10rem !important;
}
4

Thank you so much it works!

5

Glad it helped, feel free to contact me if you need any help.

6

It does not work please see the image below

Screenshot 2023-11-22 at 22.31.33.png
Screenshot 2023-11-22 at 22.31.33.png2302×674 226 KB

7

@Besteveters , go to component-predictive-search.css and add the following :

.predictive-search__results-groups-wrapper {
   
    background-color: #fff !important;
}
8

Thanks a ton it worked!!!