Hi!
I am using the District theme and having an issue with the header aligning on mobile, the cart button and currency picker are appearing on the same line as the logo and they are overlapping. I’d like the cart button and currency picker to sit next to the menu button if possible.
When I click to inspect it looks like the containers (Div Class sections) are just not going where they are supposed to, but I also don’t want to change the order they appear on desktop by moving the containers around.
A link to the store is here: https://store.balena.io/
Thank you in advance!
Hi @Lizzieepton ,
Welcome to the Shopify community! Thanks for asking a good quesiton on community. I would be happy to help you.
I saw your issue on mobile and it is very simple for me to fix. I think you want your mobile menu like this https://prnt.sc/1rdu22u see screenshot
Steps:
-
Go to your online theme editor
-
Look at on asset folder and open theme.css file
-
Paste below code on the last of the theme.css file and Save
-
Now you have done. check your mobile menu.
Note: after adding this code if you have any issue please let me know. and don’t remove the code from theme.css I’ll check there why my code is not working after adding
header.site-header .logo-contain .cart-button-container {
top: 0 !important;
}
Thanks
hii, @Lizzieepton
Paste this code on top of the theme.scss file.
@media screen and (max-width: 700px){
h1.site-logo.has-image {
position: relative !important;
top: -55px !important;
}
}
Thank You.
Hi @Zworthkey ,
Your solution gave me this:
Is there a way to send the cart button and currency picker up in line with the menu and bring the logo back down to its original line?
Thanks 
hii, @Lizzieepton
Paste this code on top of the theme.scss file.
@media screen and (max-width: 700px){
.cart-button-container {
margin-top: -52px !important;
}
}
Thank You.
1 Like
Thanks @Zworthkey that’s working
1 Like
