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:

Add the following code to the very bottom of this file:
https://myshopify.com/admin/themes/current?key=assets/style.scss.liquid&line=9999

/* -- code to make mobile nav controls larger -- */
.nav--mobile .nav-carat {
padding: 7px 0 0 0 !important;
font-weight: bold;
font-size: 1.3em !important; }
/* - end - */

How-to:
The first link will directly open your style.scss.liquid file in the theme editor. At the very bottom of the main code area, make a couple blank lines and then paste the above code (all 4 lines in the green code box). Save the file and test your site on mobile. 

Before/After example:


Increase touch zone for mobile nav controls

If you'd like to make the touch area larger for these controls, here is an optional customization to consider:

The current touch area is outlined in blue:


You can increase the touch zone area and emphasis with a background color like this:

Example with one-level expanded:

Example with second-level expanded:

Keep in mind that long menu titles may conflict if you expand the touch zone area. 

Option 1: With background color, use this code:

/* -- code to make mobile nav controls larger and increase touch zone -- */
.nav--mobile .nav-carat {
	padding: 1px 1px 1px 0 !important;
	font-weight: bold;
	font-size: 1.5em !important; 
	min-width:6rem;
	text-align:center;
        background: #f1f1f1;
}
/* - end - */

Save the file.

The background color option does help with phones as it gives the user a button style area and an easier target to reach. You can change the background color to any hex code value.

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

Option 2: No background color, use this code:

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

Save the file.

Still need help? Contact Us Contact Us