How can I extend the search bar?

Topic summary

A user seeks to extend the search bar width in their Dawn Theme 15.0.0 Shopify store.

Solutions Provided:

Multiple community members offered CSS code snippets to increase the search bar width:

  • Primary approach: Add custom CSS to base.css or theme.liquid using a media query targeting screens 990px and wider
  • Key CSS properties: Set .search-modal__form to max-width: 100rem or 100% with !important flags
  • Additional adjustments: Modify header grid template columns and ensure responsive display across devices

Outcome:

The original poster confirmed the solution worked successfully. One contributor noted a tablet display issue emerged after implementation and suggested reviewing the responsive behavior. The discussion concluded with the issue resolved and an offer for further assistance if needed.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.

Hi,

how can I extend the search bar?

Dawn Theme 15.0.0

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

Thank you.

@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;
}

}
1 Like

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.

1 Like

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

1 Like

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

1 Like

Amazing. Thank you so much!

Hi @store095 ,

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

1 Like