Make my mobile navigation expand and close controls larger

With some fonts and colours, the mobile expand and close icons can be difficult to see. Here's some code you can add that will make them bolder to help users especially when soft colours or fonts are used:

Before/After example:

/* -- code to make mobile nav controls larger -- */
.nav--mobile .nav-carat {
	padding: 1px 1px 1px 0 !important;
	font-weight: bold;
	font-size: 1.5em !important; 
	min-width: 3rem;
	text-align:right;
}
/* - end - */


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:

assets/theme.scss.liquid

Quick link if the theme is live/published:
assets/theme.scss.liquid

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:

assets/style.scss.liquid

Quick link if the theme is live/published and an earlier version of Pipeline:
assets/style.scss.liquid

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.


How to make your top-level menu items open easily on mobile

Tip - Change the SHOP link to a hashtag "#" - This will open the sub-menus when you click on SHOP. You can do this with any top-level menu item. 

Result:

How to:

Change the link for "Shop" to #:

Older navigation:
Newer navigation:

Add the hashtag in the link area (1)
When you add it (2), you'll get a pop-up above. Press the blue bar (3) to accept. Then Apply changes to save. 

Use the Apply changes button to complete and then Save your menu changes. 

Still need help? Contact Us Contact Us