How to add an edge-to-edge search bar in the Supply theme?

Technical Q&A

Topic summary

A user seeks to add an edge-to-edge search bar between the logo and hero banner on mobile view only in the Supply theme, effectively pushing down the banner. An attached screenshot illustrates the desired placement.

Proposed Solution:

  • Add CSS code to the end of theme.scss
  • Uses media query targeting screens ≤768px width
  • Modifies .site-header elements using flexbox to reorder and display the search bar full-width

Current Status:

  • The solution remains unverified, as another user reports being unable to implement it successfully
  • No follow-up troubleshooting or alternative approaches have been provided yet
Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hello,

Does anyone know where and what code I need to add the search bar (edge to edge) between my logo and the hero banner in my Mobile view only?

Basically we push down the hero banner to make room for the new search bar!

All help appreciated! Thank you

VARIETY OF PRODUCTS TO SHOP FOR AT – Bob Rouge Store.png
VARIETY OF PRODUCTS TO SHOP FOR AT – Bob Rouge Store.png1125×2001 256 KB

2

Hi @bob-rouge-store ,

Hope you are doing well. Please place this code at the end of theme.scss:

@media screen and (max-width: 768px) {

.site-header .wrapper {

padding: 0;

}

.site-header .grid–full {

display: flex;

flex-direction: column;

margin: 0;

}

.site-header .search-bar {

display: block;

margin-bottom: 0;

width: 100%;

}

.site-header .header__message {

margin: 0;

}

}

Take a look at our screenshot here: https://prnt.sc/1130vzu

Hope this helps.

3

I couldn’t get that to work???