How To Move Instagram Icon Beside Country/Region Selector In Footer

[MMast]

Thanks in advance!

I am looking to move the instagram logo beside my country/region selector in the footer section and for pc only.

Example shown below.

https://decemberschild.com/

password: dc

[BSSCommerce-HDL · Accepted solution]

Hi @MMast, For css: 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media screen and (min-width: 750px) {
    localization-form {
      display: flex;
    }
    localization-form .list-social__item:has(.list-social__link>.icon-instagram) {
      list-style: none;
      transform: translateY(7px);
    }
    .footer__content-top .list-social__item:has(.list-social__link>.icon-instagram) {
      display: none;
    }
   
}
</style>

 Hope this can help you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @MMast, For css: 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media screen and (min-width: 750px) {
    localization-form {
      display: flex;
    }
    localization-form .list-social__item:has(.list-social__link>.icon-instagram) {
      list-style: none;
      transform: translateY(7px);
    }
    .footer__content-top .list-social__item:has(.list-social__link>.icon-instagram) {
      display: none;
    }
   
}
</style>

 Hope this can help you 😍

[BSSCommerce-HDL · Accepted solution]

And this for script to move icon ig: 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </body> tag:

 <script>
    let icon_ig = document.querySelector('.list-social__item:has(.list-social__link>.icon-instagram)');
    let parentInstagramIcon = icon_ig.parentNode;
    let footer_localization = document.querySelector('.footer__content-bottom-wrapper .footer__localization localization-form');
      
    function updateFooterLocalization() {
    if (footer_localization && icon_ig) {
     if (window.innerWidth >= 750) { 
        footer_localization.insertAdjacentElement('beforeend', icon_ig);
     } else {
       parentInstagramIcon.appendChild(icon_ig);
     }
    }
  }
  updateFooterLocalization();

  // Run on window resize
  window.addEventListener('resize', updateFooterLocalization);
    </script>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍