Story theme - Increase font size of navigation items

One method of changing the navigation font size is to increase your body font setting in the Typography settings:

However, this will also increase the size of other text that uses the body font size throughout your shop. Another method is to use override CSS code to adjust the navigation menu items. Here are some code samples you can try. 


Code samples to change font size:

1. The example size of 0.9em will make the text larger from the default size of 0.7em. You can try boost it even larger by using 1.0em;

/* -- code make top level menu items larger -- */
.header--desktop .main-menu>li>a {font-size:0.9em;  }
/* - end - */

2. The example size of 1.2em will make the text larger for both this level and the next (3). 

/* -- code make second level menu items larger -- */
.header--desktop .main-menu-dropdown li a { font-size:1.2em;}
/* - end - */

3. Use this to adjust the size and override the size inherited from (2). 

/* -- code make third level menu items larger -- */
.header--desktop .main-menu-dropdown li.child a { font-size:1.2em;}
/* - 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

Still need help? Contact Us Contact Us