How To Change Header Menu Font Size in Shopify 2024

Welcome to Morosoft Technologies! In this guide, we’ll show you how to change the header menu font size in your Shopify store for 2024. While Shopify’s default settings don’t allow direct changes to the menu font size, we’ll guide you through a simple workaround using custom code.

Step 1: Access Your Shopify Admin

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

Step 2: Access the Edit Code Section

• In the Themes section, find the theme you want to edit.
• Click the Actions button (three dots) next to your theme.
• Select Edit Code from the dropdown menu.

Step 3: Locate the Theme CSS File

• In the code editor, look at the left-hand sidebar.
• Search for the theme.css or styles.css or base.css file within the Assets folder.

Step 4: Add Custom CSS

• Scroll to the end of the theme.css file.
• Paste the following code to increase the menu font size:cssCopy code

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

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

Step 5: Save Your Changes

• Click the Save button at the top right of the code editor.

Step 6: Preview Your Store

• Return to the Shopify admin panel.
• Go to Online Store in the left-hand sidebar.
• Select Themes, then click on Actions followed by Preview to see the changes in your store.

Step 7: Check Mobile Responsiveness

• Open your store on a mobile device or use the browser’s developer tools to simulate a mobile view.
• Ensure the header menu font size is appropriate on all devices.

Conclusion

By following these steps, you can easily customize the header menu font size in your Shopify store, enhancing both desktop and mobile user experiences. For more tips and resources, explore our blog at Morosoft Technologies!

Watch the Tutorial