Shopify themes, liquid, logos, and UX
Hi can you please help me make the social icons horizontal? also even though I can see the icons in shopify (mobile version) but in my mobile I can't.
Solved! Go to the solution
This is an accepted solution.
Add this into your custom code section in your theme customized settings options.
@media(max-width: 768px){
.menu-drawer .list-social__link {
padding: 10px !important;
}
.menu-drawer__utility-links ul {
display: flex !important;
justify-content: center !important;
align-items: center !important;
column-gap: 34px !important;
vertical-align: middle;
padding: unset !important;
margin: unset !important;
}
ul.list.list-social.list-unstyled li {
padding: unset !important;
height: 30px !important;
}
.link{
display: unset !important;
}
}
This is an accepted solution.
Hello @MT27
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
@media screen and(max-width: 767px){
.menu-drawer .list-social__link {
padding: 10px !important;
}
.menu-drawer__utility-links ul {
display: flex !important;
justify-content: center !important;
align-items: center !important;
column-gap: 34px !important;
vertical-align: middle;
padding: unset !important;
margin: unset !important;
}
ul.list.list-social.list-unstyled li {
padding: unset !important;
height: 30px !important;
}
.link{
display: unset !important;
}
}
</style>
Hi I coppied it to the blue line as you can see from the screenshot but nothing happened, can you check if I have done something wrong? Thank you
This is an accepted solution.
Add this into your custom code section in your theme customized settings options.
@media(max-width: 768px){
.menu-drawer .list-social__link {
padding: 10px !important;
}
.menu-drawer__utility-links ul {
display: flex !important;
justify-content: center !important;
align-items: center !important;
column-gap: 34px !important;
vertical-align: middle;
padding: unset !important;
margin: unset !important;
}
ul.list.list-social.list-unstyled li {
padding: unset !important;
height: 30px !important;
}
.link{
display: unset !important;
}
}
This is an accepted solution.
it messes up the order of the pages (check image)
Hi!
Are you able to send code for doing this in a footer?
Discover how to increase customer engagement on your store with articles from Shopify A...
By Jacqui Apr 23, 2025Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025