Change main navigation menu text size that is tied to the 'Body' font settings

Store Design
, , ,
1

We are trying to increase the size of our main navigation menu font size. The issue is that standard CSS allows us to increase the font size, however the original font size (16px) loads first then increases to our (18px) size. So essentially you can see the shift in text font size upon page load.

By default navigation text size is tied to the ‘Body’ font settings in the main ‘Theme Settings’ menu under ‘Typography’. If we update the setting in Theme Settings then all font sizes on the site increase. We have used the CSS code below which creates a shift in text size upon page load: (You can see the text shift from 16px to 18px upon page load.)

.main-menu__content {
font-size: 18px !important;
}

We are using the Enterprise theme located here: https://themes.shopify.com/themes/enterprise/styles/active/preview

Does anyone know how to override the default navigation text size so it replaces the font size without first loading the original 16px size then loading the 18px size, essentially creating a shift in text size during page load.

I believe this is happening because by default navigation text size is tied to the ‘Body’ font settings in the main ‘Theme Settings’ menu under ‘Typography’. That is why the standard CSS as show above doesn’t load the 18px initially upon page load. It shows 16px first then quickly changes to 18px.

2

Hi @mwolff9328 ,

Have you tried placing the css code inside the <head tag at the theme.liquid file under the Layout folder?

3

Thanks for providing this feedback. Your solution of adding the CSS to the head tag at the theme.liquid file under the Layout folder worked perfectly. Thanks again!