Hey there,
I’ve recently added social media links to my header and these look great & how I wanted them on desktop.
However they don’t look that great on mobile.
I’ve tried a couple of solutions posted here for header icons but nothing worked yet.
Is there a way to rearrange the icons only for mobile?
Link: https://memesandprints.com/
In the example below the red icons should be under the menu icon & logo (Blue)
Thank you in advance for your assistance.
You can follow this instruction:
Go to Shopify > Theme > Customize
Copy and paste this code on Theme settings > Custom CSS section
@media screen and (max-width: 768px){
header.header ul.list.list-social.list-unstyled {
grid-area: icons !important;
}
header.header {
grid-template-areas:
"left-icons heading heading"
"left-icons icons icons" !important;
}
h1.header__heading {
justify-self: center !important;
}
}
Result:
Thank you.
Esther
That’s exactly as I wanted it Esther! Thank you very much!
