How can I extend the search bar?

[store095]

Hi,

how can I extend the search bar?

Dawn Theme 15.0.0

Url: https://ba571d-cc.myshopify.com/

Thank you.

[Abdosamer]

@store095 , go to base.css and add the following code to the end of it :

@media (min-width:990px){
.search-modal__form {
    max-width: 130rem !important;
    width: 100rem !important;
}

}

[niraj_patel]

Hello @store095

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media screen and (min-width: 990px) { .search-modal__form { max-width: 100rem !important; width: 100rem !important; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[namphan]

Hi @store095 ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (min-width: 990px) {
    .header--top-left, .header--middle-left:not(.header--has-menu) {
        grid-template-columns: auto 1fr !important;
    }
    .desktop-search,
    .header__icons {
        width: 100%;
    }
    .search-modal__form {
        max-width: none;
    }
    .search-modal__form {
        max-width: 100%;
    }
}

It will help you display well for all devices, including ipad pro

[namphan]

Hi @store095 ,

Now with the changes, the header at your tablet is getting the same error as I described before, so you can check it again and try the solution I sent.

hope it can help you

[store095]

Amazing. Thank you so much!

[namphan]

Hi @store095 ,

You’re welcome. If you have any questions, you can contact me directly.
Nice to meet you