Mobile: Reverse mobile navigation icons

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

Example Before:


After with:

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

Option to add color to the cart bubble


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

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

Where do I add the code?

Open your Code Editor. 

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

Next, in the Code Editor find your theme's CSS file, this will vary depending on which version of Pipeline you're running:
Which version of Pipeline am I using?

Once you know your version, find the right file in the left Assets folder:

Pipeline 4 - If you're working with a draft theme, open this file:

You'll be opening this file:


Quick link if the theme is live/published:

Earlier versions of Pipeline - If your theme is older than Pipeline 4 open this file for draft themes:

You'll be opening this file for earlier versions of Pipeline:


Quick link if the theme is live/published and an earlier version of Pipeline:

Add the code to the very bottom of the file on a new line. Make a couple blank lines before pasting the code snippet. 

Save the file after adding your code.

Still need help? Contact Us Contact Us