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:
- From Shopify's admin, select Online Store.
- Select Actions.
- Select Edit code.
- Under "Assets", select your theme's main CSS file.
Note: This will vary by theme and could be something like theme.scss.liquid.
- Copy and paste this code to the end of the file:
.search_bar select, .search_bar input { display: inline !important; } - 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;
}