Contents in Header Bar not Lining up Properly

• Store Locator
• All Versions
• Basic CSS knowledge required
• 10 Minutes

The contents in the header bar can be misaligned in Retina and other themes as a result of the themes input styling affecting the styling of the input tags in the Store Locator Widget.

To fix the issue, please follow these steps:

1. From Shopify's 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 this code to the end of the file:

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

6. Select Save.

   

That's it!

If the width and padding of the input fields are also affected, adding this CSS could fix it:

.main_search_label {
 width: auto !important; 
}

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

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

Next Steps:

• Bulk Import Stores in Store Locator
• Display Settings
• Change the Website Text

Blog Posts:

• Why Store Locator was the Solution for Slawsa from Shark Tank
• Help your customers find you and your products [IRL]