Mobile: Reverse mobile navigation icons

To swap the icon locations for your mobile navigation, you can make this customization.

Example Before:

After:

After with items in cart:

Code to use for Pipeline 5.0 and higher:

/* -- code swap mobile navigation and cart icons -- */
.header__mobile__right {  order: 0; }
.header__logo{  order: 1; }
.header__mobile__left {  order: 2; }
.header__mobile__right,
.header__mobile__right .header__mobile__button{  justify-content: flex-start; }
.header__mobile__left,
.header__mobile__left .header__mobile__button{  justify-content: flex-end; }
/* - end - */

Code to use for earlier versions of Pipeline:

/* -- code swap mobile navigation and cart icons -- */
@media screen and (max-width: $small) {
  .nav--mobile .header-hamburger { 
    left:0; 
  }
  .CartToggle.header-cart { 
    left: 90%; 
  }
  .header-cart__bubble.cartCount {
    left: 95%;
  }
}  
/* - end - */

Option to add color to the cart bubble

Example:

Code to use for Pipeline 5.0 and higher:

/* -- code to change color of mobile cart bubble -- */
.header__desktop__buttons--icons .header__cart__status [data-header-cart-full=true], 
.header__mobile__button .header__cart__status [data-header-cart-full=true] {
    background: #f44336;
}
/* - end - */

Code to use for earlier versions of Pipeline:

/* -- code to change color of mobile cart bubble -- */
.header-cart__bubble.cartCount {
  background: #f44336;
  z-index: 9999;
}
/* - end - */

You can use this code to change the color even without the icon swap. The color code is in addition to the icon swap, use both if you're swapping the icons and adding color. 

hex color code references:

http://www.colorhexa.com/web-safe-colors

https://picular.co/

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code