How To Change Header Menu Font Size [Shopify Dawn v15]

Welcome to Wepsense Pro! In this blog post, we’ll guide you through increasing the menu font size in your Shopify store. While Shopify’s default settings don’t allow you to change the menu font size independently, you can still achieve this through a few easy steps.

Step 1: Access Your Shopify Admin

  1. Log in to your Shopify admin panel.
  2. Navigate to Online Store in the left-hand sidebar.
  3. Click on Themes.

Step 2: Customize Your Theme

  1. In the Themes section, find the theme you want to edit.
  2. Click on Customize.

Step 3: Access Theme Settings

  1. In the theme editor, look for the Theme settings tab, usually located at the bottom of the sidebar.
  2. Click on Typography or a similar section (the exact name may vary depending on your theme).

Step 4: Adjust Font Settings

  1. In the Typography settings, look for the options related to the menu or navigation font size.
  2. If available, use the provided slider or input box to increase the font size to your desired value.

Step 5: Save Your Changes

  1. Click the Save button to apply the changes.
  2. Navigate back to your Shopify admin panel.

Step 6: Preview Your Store

  1. Click on Online Store in the left-hand sidebar.
  2. Select Themes.
  3. Click on Actions and then Preview to see the changes in your store.

Step 7: Check the Mobile Version

  1. Open your store on a mobile device or use your browser’s developer tools to simulate a mobile view.
  2. Ensure that the menu font size looks good on both desktop and mobile versions.

Conclusion
Changing the menu font size in Shopify can greatly improve the user experience of your store. By following these steps, you can easily customize your menu to suit your branding and design preferences. Don’t forget to explore our other free resources and tutorials to make the most out of your Shopify store.

.header__menu-item{
    font-size: 20px !important;
}

@media (max-width: 749px){
    .menu-drawer__menu-item, .menu-drawer__close-button{
        font-size: 20px !important;
    }
}
4.9/5 - (7 votes)

About

Leave a Comment

Your email address will not be published. Required fields are marked *