Mastering Your Shopify Horizon Theme: Customizing Sub-Menu Fonts & Case

Hey there, fellow store owners! As a Shopify expert who spends a lot of time digging through community discussions, I often come across merchants facing similar design dilemmas. One common theme? The desire for more granular control over menu styling, especially when it comes to those crucial sub-menus.

Recently, a fantastic thread popped up from a merchant named Geronim0, asking a question many of you have likely pondered: "How do I change the sub-menu font size and font case in the Horizon Theme?" It's a great question because, let's be honest, the default settings don't always align with your brand's unique look and feel. Let's dive into what the community uncovered and how you can apply these insights to your own store.

The Quest for Sub-Menu Perfection in Horizon

Geronim0's initial challenge was pretty straightforward: they wanted their sub-menu items to be smaller and use lowercase text, distinct from the parent menu. They even tried some CSS, but it wasn't quite hitting the mark. This is a classic scenario – you know what you want to achieve, but finding the right CSS selector in a complex theme can feel like searching for a needle in a haystack.

Here's a glimpse of what Geronim0 was working with:

The beauty of the Shopify community, though, is that someone almost always has an answer! Enter Moeed, a helpful Shopify Partner, who swooped in with a comprehensive solution.

The Community-Approved Solution: Custom CSS to the Rescue

Moeed's solution was elegant because it addressed both desktop (mega-menu) and mobile (menu-drawer) sub-menus, which often require different CSS selectors in themes like Horizon. He provided a single block of CSS that could be added in a couple of different ways, making it super flexible.

Here's the code that ultimately solved Geronim0's dilemma:

.mega-menu__list span.wrap-text {
    text-transform: capitalize !important;
    font-size: 13px !important;
}
.menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu span {
    text-transform: capitalize !important;
    font-size: 12px !important;
}

A quick note on the text-transform: Geronim0 initially asked for lowercase, but Moeed's solution uses capitalize, which Geronim0 confirmed worked perfectly. If you still want lowercase, simply change capitalize to lowercase in the code above!

And here's the visual result Moeed shared, showing the impact of the custom CSS:

Implementing the Custom Styles: Two Easy Methods

Moeed provided two excellent ways to add this CSS to your Shopify store. Both are effective, but one might be more comfortable depending on your comfort level with code.

Method 1: Using the Theme Customizer's Custom CSS Option (Recommended for most!)

This is often the easiest and safest way to add custom CSS, as it keeps your changes separate from the main theme files, making updates smoother.

1. Go to your Shopify Admin.
2. Navigate to Online Store > Themes.
3. Find your current theme (Horizon) and click Customize.
4. In the theme editor, look for the Header section.
5. Scroll down within the Header settings until you find an option for Custom CSS (it might be labeled as “Custom CSS for Header” or similar).
6. Paste the code provided above into this field.
7. Click Save in the top right corner.

Method 2: Directly Editing the theme.liquid File (For advanced users)

This method involves editing your theme's core code. Always make a duplicate of your theme before making any code changes!

1. Go to your Shopify Admin.
2. Navigate to Online Store > Themes.
3. Find your current theme (Horizon), click Actions > Duplicate. This creates a backup!
4. Once duplicated, click Actions > Edit Code on your *working* theme.
5. In the file explorer on the left, find the theme.liquid file under the "Layout" directory.
6. Scroll to the very bottom of the theme.liquid file.
7. Just above the closing tag, paste the following code block (including the
   8. Click Save.

   Understanding the Code & Making It Your Own

   Let's quickly break down what this CSS snippet does:

   • .mega-menu__list span.wrap-text: This is the specific selector for your desktop sub-menu items within the Horizon theme.
   • .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu span: This is the selector targeting your mobile sub-menu items. Notice how different it is! This highlights why a single CSS rule often won't cover both.
   • text-transform: capitalize !important;: This property controls the capitalization of your text. You can change capitalize to lowercase, uppercase, or none to suit your design. The !important flag ensures that your custom style overrides any default theme styles.
   • font-size: 13px !important; (and 12px !important; for mobile): This sets the size of your font. Feel free to adjust 13px and 12px to any pixel value you prefer to get the perfect look for your sub-menus.

   The beauty of platforms like Shopify is the incredible flexibility they offer. Whether you're just starting your journey on Shopify or looking to fine-tune your existing store, little tweaks like this can make a huge difference in your store's professional appearance and user experience. Remember to always test your changes on both desktop and mobile devices to ensure everything looks exactly as you intend. Big thanks to Moeed and Geronim0 for sharing their insights and making the community a better place for all of us!