Help me make the social icons horizontal in header menu-drawe

Store Design
,

Topic summary

A user seeks help making social media icons display horizontally in their Shopify theme’s mobile menu drawer. The icons are visible in Shopify’s mobile preview but not on actual mobile devices.

Attempted Solutions:

  • One responder provided CSS code to be added before </body> in theme.liquid, targeting the menu drawer with flexbox properties and media queries for mobile screens.
  • Another suggested placing similar CSS in the theme’s custom code section within customization settings.

Current Issue:
The user reports that implementing the CSS code disrupts the page order/layout (shown in screenshots). The discussion remains unresolved, with a third participant asking if the user can send code, though this message appears incomplete or corrupted.

Note: Several code snippets and portions of text appear reversed or garbled in the original conversation, suggesting possible encoding issues.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

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.

MT27_0-1706107380798.png
MT27_0-1706107380798.png503×736 51 KB

MT27_2-1706107497374.png
MT27_2-1706107497374.png343×744 42 KB

2

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 on theme.liquid

@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; } }

techlyser_web_0-1706109020404.png
techlyser_web_0-1706109020404.png155×287 4.97 KB

3

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

MT27_0-1706118682598.png
MT27_0-1706118682598.png1878×784 77.4 KB

MT27_1-1706118700593.png
MT27_1-1706118700593.png1894×818 81.6 KB

4

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;
  }
}
5

it messes up the order of the pages (check image)

MT27_0-1706175070244.png
MT27_0-1706175070244.png1431×758 104 KB

6

Hi!

Are you able to send code for doing this in a footer?