Why is my search bar background not extending fully?

[AdamT06]

hello im having an issue with my searchbar. i dont know why it does this but suddenly when i press the search icon the searchbar (and searchbar backgorund) dosent go all the way to the ends.

here is some photos of what i mean and how i want it to look:

(if its possible then i would also like the searchbar background to be the same as the fourth image not white but black/ dark)

how mine looks at the homepage and then when i press the search-icon:

how i want the searchbar and searchbar background to look:

pls let me know if you need the url and password for the website

[TerenceKEANE]

I think there are some software-related issues in the theme. If you add the site link, we can look into this, Adam!

Terence Keane

Best Regards,

[AdamT06]

sorry for first answering now @TerenceKEANE hope you still can help.

website url: https://10a0f2-2.myshopify.com/

password to enter: test123

[TerenceKEANE]

I did my best to try and address it. I left some small notes on the code for you to change the colors. I think you’ll figure it out through trial and error. You can also learn how to upload the codes from the link below. And finally, it would be much better if you check for conflicts.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

.modal-overlay {
    display: none!important;
}

#site-header {
    max-width: 100vw;
}
// search area full background color
.search-modal__content.search-modal__content-bottom {
    background: #ffffff;
}
// search  background color and border
input#Search-In-Modal-1 {
    background: #ffffff;
    border: 2px solid black;
        color: black;
}
// icon color
svg.icon.icon-close {
    filter: invert(1);
}

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

input#Search-In-Modal-1:focus {
    box-shadow: 0 0 0 black!important;
}

.field__input::placeholder {
    color: black!important;
    opacity: 1!important;
}

label.field__label {
    color: transparent;
}

Terence Keane

Best Regards,

[AdamT06]

@TerenceKEANE where do i put the code in? it doesent help when i put it in the custom ccs section

[AdamT06]

i get this error (i transleted it from danish to english):

“Session for webshop editor cannot be published”

[TerenceKEANE]

That error is unfortunately sometimes a chronic issue in Shopify sites. I recommend checking out the video below. If you have access to the tag, you can directly add the code I provided between the tags.

https://www.youtube.com/watch?v=R1vmKdVgsIk