Contents in Header Bar Not Lining Up Properly

Overview

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

To fix the issue, please follow the steps below.

 


 

Set-Up

  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.

    Theme SCSS

  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;
}
Was this article helpful?
1 out of 3 found this helpful