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

[MT27]

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. 

[Danishshopdev · 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;
  }
}

[niraj_patel]

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>

[MT27]

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

[Danishshopdev · 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;
  }
}

[MT27 · Accepted solution]

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

[PremierCopper]

Hi!

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