Contents in Header Bar Not Lining Up Properly

Modified on Fri, 1 Sep, 2023 at 3:32 AM

Overview

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.

    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?

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 at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article