Mobile: Reverse mobile navigation icons

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

Result

Before:

After:

After with items in cart:

How to

Add the following code to the very bottom of this file on a new line:
assets/style.scss.liquid

/* -- 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 - */

Save the file.


Option to add color to the cart bubble

Example:

Add the following code to the very bottom of this file on a new line:
assets/style.scss.liquid

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

Save the file.

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. 

Use any valid hex color code for the color of the bubble. Additional colors:

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

Still need help? Contact Us Contact Us