Contents in Header Bar Not Lining Up Properly

Created by Brett Mikulik, Modified on Mon, 07 Nov 2022 at 03:20 PM by Brett Mikulik


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.


  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.


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?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article