Social Icons on the Right

What does this code do?

This code snippet will mirror the order of the main navigation so that the button and cart are on the left while the social icons are on the right.

Set Up the Header

First things first, you need to set up the header. Add all the elements you want to the header and choose the following header layout.

Code Snippets

Copy and paste this code into Custom CSS.

/* Flip Header Navigation Order */
// Social Icons on the Right
.header-display-desktop .header-actions--left {
  order: 3;
  justify-content: flex-end !important;
}
.header-display-desktop .header-actions-action--social a {
  margin-right: 0 !important;
  margin-left: 1.6vw;
}
// Site Title and Navigation in the Center
.header-display-desktop .header-title-nav-wrapper {
  order: 2;
}
// Button and Cart on the Left 
.header-display-desktop .header-actions--right {
  order: 1;
  justify-content: flex-start !important;
}
.header-display-desktop .header-actions--right .header-actions-action {
  margin: 0 2.5vw 0 0 !important;
}

If you have the cart turned on, you can add this code to have the cart display to the right of the button.

// Cart on the Right of the Button 
.header-display-desktop .header-actions--right .showOnMobile{
  order: 1;
}
.header-display-desktop .header-actions--right .showOnDesktop {
  order: 3;
}
.header-display-desktop .header-actions--right .header-actions-action--cta {
  order: 2;
}

How To Use It

1. Set up your header.

2. Copy and paste the code as indicated above.