Search bar progressively smaller (Dawn)

[manbru]

Hello,

My search bar doesn’t adjust to different screen sizes and it certainly doesn’t make it progressive. I want the left side to remain stationary while the right side becomes smaller in width. You can first see my search bar and then an example of how I want it to be customized in this video:

https://imgur.com/a/cKtVOCh

I’ve tried with this code below but it doesn’t work and don’t do it progressively smaller from the right side of the search bar.

Here is my store:

https://r1vex.myshopify.com/

Thanks for helping!

[BSSCommerce-B2B]

@manbru , follow these steps

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

[manbru]

This code worked great however it moved the cart and account icon to the side of it:

I would want the search bar to be in the middle.

[Made4uo-Ribe]

Hi @manbru

Im not sure what is the original design, without the added code.I manage to make it like this.

I use this code.

input.search__input.field__input {
    width: 100%;
    max-width: 100%;
}
@media screen and (min-width: 990px) {
    .search-modal__form {
        max-width: 80%;
    }
}
.header__icons {
    display: flex;
    justify-self: unset;
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!