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?

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

Where to add your CSS style 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