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

Still need help? Contact Us Contact Us