Social Icons in Mobile Header

What does this code do?

This code snippet will move the social icons from the mobile menu to the mobile navigation bar next to the hamburger button.

Note: There is not a lot of room in the mobile navigation. So, this only works if the site title is short and you do not have a lot of social icons. Be sure to check the site on various devices to ensure that the hamburger menu does not go outside of the screen.

Video Tutorial

Set Up the Mobile Navigation

Click to edit the Header and add your social links. Then turn the Cart Icon on. You need to have this on for the code to work even if you do not have a shop. Don’t worry, we can hide the cart icon later.

Code Snippets

Copy and paste this code into Settings > Advanced > Code Injection > Footer

<!-- Social Links in Mobile Nav Bar -->
<script>
(function () {
  var headerSocial = document.querySelectorAll(".header-menu-actions-action--social");
  var mobileActions = document.querySelector(".header-display-mobile .showOnMobile");

  for (var i = 0; i < headerSocial.length; i++) {
    mobileActions.append(headerSocial[i]);
  }
})();
</script>

Then copy and paste this code into Design > Custom CSS

/* Social Links in Mobile Nav Bar */
.header .header-title-nav-wrapper {
  flex: 1 0 50% !important; /*Makes Space for Title Smaller */
}
.showOnMobile {
  display: flex;
  flex-direction: row; /*Shows Social links in a Row */
}
.showOnMobile * {
  display: flex;
  align-items: center; /*Vertically aligns items */
}

/*Hide the Cart Icon */
.header-actions-action--cart {
  display: none; /*hides cart */
  margin: 15px 7.5px !important; /* spacing for cart */
}

Then customize the spacing and alignment.

How To Use It

1. Set up your mobile navigation and make sure the cart icon is on.

2. Copy and paste the code as indicated above.

3. Customize the size and alignment.