Language selector moved to the header (after the cart) caused icons to be too close and misaligned on mobile in Shopify’s Dawn theme.
Suggested fix: add CSS to the header icons container to align and space items. Use .header__icons with align-items: center and either gap: 10px (controls spacing) or add padding-left: 10px to #FooterLanguageForm within .header__icons.
Where to edit: Theme Editor > Assets > base.css, append the rules at the bottom.
Outcome: The original spacing/alignment issue appears resolved (OP expressed thanks).
Follow-up request: Another participant asked how to position the language selector directly next to the cart. They can place it in the header but it sits below the header rather than beside the cart. An attached screenshot is central to understanding this placement problem.
Status: Initial alignment/spacing addressed; the positioning of the language selector next to the cart remains open without a provided method or code changes to move the element.
Hi, I moved the language selector to the header after the cart icon, however now the two icons are too close and on the phone the icons are also not align, I am using dawn theme. Can someone help me with this? The site is lino.eco
Thank you in advance.
If you know how to edit the css file you can add:
.header__icons{
align-items:center;
gap:10px;
}
where there gap:10px is how much space you want between the icon and the language selector.
Hi @Tristram
Open Theme Editor > assets > base.css and this code at the bottom
.header__icons {
align-items: center;
}
.header__icons #FooterLanguageForm {
padding-left: 10px;
}
Try and let me know
you [email removed] the wrong dude
Thank you so much!!
Thank you so much!
Hey @Par-Digital !
Sorry to disturb, could you kindly share how you moved the language selector after the cart ?
I managed to bring it up to the header but it’s located weirdly under my header.
I would very much like to have it next to the cart.
Thanks a lot!
