Adding searchbar i use for the desktop version to my mobile version?

Store Design
, , , , ,

Topic summary

A user wants to implement their desktop search bar on the mobile version of their Shopify store (Dawn theme 5.0.0). They provided a screenshot showing the desired mobile layout.

Solution provided:
Another user shared CSS code using a media query for screens under 767px width that:

  • Hides the default mobile search element
  • Displays the desktop search bar instead
  • Adjusts header padding and grid template columns for proper mobile formatting

Outcome:
The CSS solution successfully resolved the issue. The original poster confirmed it’s working as intended.

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

Hi, i want to use the searchbar i use for my desktop version also for my mobile version.

It should look like this:

IMG_1206.jpeg
IMG_1206.jpeg1019×270 11.1 KB

Is that possible?

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

Dawn theme 15.0.0

Thank you.

2

Please use this code

@media (max-width: 767px) {
    .mobile-search {
        display: none !important;
    }
    .desktop-search {
        display: block !important;
    }
    .header--mobile-left {
        grid-template-columns: auto 2fr 4fr !important;
    }
    .header { padding: 10px 3px !important; }
}
1 Like
3

Its working.

Thank you.