Big Cartel Theme Support

How do I style the font used in my mobile menus?

How do I style the font used in my mobile menus?

The mobile menu font is standardised across our themes to ensure consistent appearance, size and usability. For this reason, the mobile menu font can not be edited via your standard theme settings.

We do not recommend editing the mobile menu font. If you choose to do so, it is up to you to ensure that the correct appearance and usability across all mobile devices is maintained. If further CSS is required to achieve this, please refer to How do I customise my theme beyond the standard settings?

To style the font in your mobile menu, add the following CSS to your custom style coding area — see Where do I add custom style code?:

/* Mobile menu text */
#mobile-bar, #mobile-menu, #mobile-bar h1, #mobile-bar h2, #mobile-bar h3,
#mobile-bar h4, #mobile-bar h5, #mobile-bar h6, #mobile-menu h1, #mobile-menu h2,
#mobile-menu h3, #mobile-menu h4, #mobile-menu h5, #mobile-menu h6 {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

You can then edit the font family as needed. For example:

/* Mobile menu text */
#mobile-bar, #mobile-menu, #mobile-bar h1, #mobile-bar h2, #mobile-bar h3,
#mobile-bar h4, #mobile-bar h5, #mobile-bar h6, #mobile-menu h1, #mobile-menu h2,
#mobile-menu h3, #mobile-menu h4, #mobile-menu h5, #mobile-menu h6 {
	font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
}

We do not recommend adding any further styles for font size or appearance.

Click the Done and Save buttons to apply your changes.

AarcadeHow do I style the font used in my mobile menus?