Contents in Header Bar Not Lining Up Properly

Occasionally, your theme may interfere with Store Locator's styling.

This article outlines how to fix the contents not lining up in Store Locator's header bar.

Setup

1. From the Shopify admin, select Online Store.
2. Select Actions.
3. Select Edit code.
4. Under Assets, select your theme's main CSS file.

   Note: This will vary by theme and could be something like theme.scss.liquid.

   

5. Copy and paste the following code at the bottom of the file:

   .search_bar select, .search_bar input {
   display: inline !important;
   }

6. Select Save.

Troubleshooting

If the width and padding of the input fields are also affected, adding the following CSS should fix it

.main_search_label {
 width: auto !important; 
}

.search_bar #within_distance {
 width: 90px !important;
}

.search_bar #limit {
 width: 62px !important;
}