Search Bar Open And In The Centre Dawn (PLEASE HELP)

[pixdroid]

Hi everyone, I am trying to achieve what I have made in this mock up image attached.

I would like the search bar in the centre and constantly open with a white background and curved edges.

So far I have managed to get the search bar to stay open but I am struggling with the rest.

If anyone could help me I would really appreciate it

https://everyone-love-it-ltd.myshopify.com/

Kind Regards, Reece

[MandasaTech]

Hello @pixdroid
https://everyone-love-it-ltd.myshopify.com/

Please share your website password.

[oscprofessional]

@pixdroid
hello,
Your Site its Currently Password protected So Can You Please Share Your Store Password

[Ujjaval]

@pixdroid sHARE YOUR STORE PASSWORD?

[pixdroid]

PASSWORD : testingattentionplease

[pixdroid]

testingattentionplease

[pixdroid]

I tried this code you posted on another forum but it did not work for some reason

<style>
.predictive-search.predictive-search--header {
background-color: white;
color: black !important;
}
#predictive-search-products {
color: black !important;
}
.predictive-search__item-heading.h5 {
color: black !important;
}
.predictive-search__item.predictive-search__item--term.link.link--text.h5.animate-arrow {
color: black!important;
}
.predictive-search__item .icon.icon-arrow {
color: black !important;
}
.predictive-search__list-item:nth-last-child(2) {
border-bottom: 0.1rem solid #dddddd !important;
}
.predictive-search__heading {
border-bottom: 0.1rem solid #ddd !important;
}
</style>

[Ujjaval]

@pixdroid
Put below code in header file showing like in below image(To always open searchbar in dawn theme)

[pixdroid]

Thank you for your time & response . I now have the search bar always open now and in the centre. However I am still struggling to change the background colour to white, the text to black and to create curved border.

Kind Regards

[pixdroid]

I tried this code, thank you very much for writing it, unfortunately this is the result I got.

[pixdroid]

If anyone wants to request access to my store and do it for me I can pay for your time & help

[Ujjaval]

@pixdroid
add below css into base.css

.search__input.field__input {
    border-radius: 10px !important;;
    border: solid 1px black !important;;
    background-color: white !important;;
}
sticky-header.header-wrapper.color-inverse.gradient.header-wrapper--border-bottom {
    background-color: white !important;;
}
label.field__label {
    color: black !important;;
}
.search__button .icon {
    color: black !important;;
}
.header__icon, .header__icon--cart .icon {
    color: black !important;
  }

[pixdroid]

So guys I have gotten a little further I have now made it white with curved edges however I now have a square border and can not change text colour to black or icon to black please help

[pixdroid]

Hi again, I did try this and unfortunately did not work, I am so confused and stuck with this. I really appreciate the help.