Community Solved: Customizing Sub-Menu Font Size and Case in Shopify's Horizon Theme

Hey everyone! As a Shopify migration expert and someone who loves digging into the community forums, I often stumble upon discussions that hit home for many store owners. We all want our stores to stand out, right? And sometimes, that means diving a little deeper than the standard theme settings. Today, I want to talk about a super common customization request that came up in a recent thread involving the popular Horizon theme: how to tweak your sub-menu font size and case.

It sounds simple, but getting those sub-menu items just right – maybe a bit smaller, or with a different capitalization than your main menu – can really refine your site's look and feel. The default theme settings often apply font styles broadly, making it tricky to isolate specific elements like sub-menus. That's exactly what our fellow store owner, Geronim0 (Girish), discovered.

The Design Dilemma: Sub-Menus That Don't Quite Fit

Girish was running into a classic problem: his parent menu and sub-menu items in the Horizon theme looked identical in font size and case. He wanted his sub-menus to be smaller and perhaps in lowercase, to create a clear visual hierarchy. His initial attempt to apply some CSS to .header__submenu .mega-menu__list-title, .header__submenu .header__menu-item in his base.css file didn't quite do the trick. This is a common pitfall – finding the exact CSS selector for a specific theme element can be like finding a needle in a haystack!

Thankfully, the Shopify community is full of brilliant minds ready to help. Moeed, a Shopify Partner, stepped in with a fantastic solution that not only addressed the desktop view but also the crucial mobile experience.

Moeed's Expert CSS Solution: Targeting Horizon's Menus

The key to Moeed's solution was identifying the precise CSS classes that control the sub-menus in the Horizon theme. He provided a two-part CSS snippet, one for the desktop mega-menu and another for the mobile menu drawer.

For your Desktop Mega-Menu Sub-Items:

This snippet targets the sub-menu items that appear when you hover over a main menu item on a desktop browser. Geronim0 initially confirmed this part worked perfectly for him!

.mega-menu__list span.wrap-text {
    text-transform: capitalize !important;
    font-size: 13px !important;
}

For your Mobile Menu Drawer Sub-Items:

Later, Geronim0 realized he also needed to apply these changes to the mobile menu. Moeed's comprehensive solution already had this covered, targeting the menu that slides out on mobile devices:

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

As you can see, the selectors .mega-menu__list span.wrap-text and .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu span are much more specific to the Horizon theme's structure than Geronim0's initial attempt. This is why they work!

Let's quickly break down what's happening in these code snippets:

• text-transform: capitalize !important;: This property controls the capitalization of your text. Moeed used capitalize, which makes the first letter of each word uppercase. If you want everything lowercase, you'd change this to lowercase !important;. For all uppercase, use uppercase !important;. The !important flag is there to ensure your custom style overrides any default theme styles.
• font-size: 13px !important; (or 12px for mobile): This sets the font size. You can adjust the pixel value (e.g., 10px, 14px) to whatever looks best for your store's design. Again, !important ensures your setting takes precedence.

How to Implement This CSS in Your Horizon Theme

Moeed provided two excellent ways to add this custom CSS to your Shopify store. Always remember to back up your theme before making any code changes, or better yet, test on a duplicate theme first!

Method 1: Using the Theme Customization Editor (Recommended for most users)

This is often the easiest and safest method as it doesn't involve directly editing core theme files.

1. From your Shopify admin, go to Online Store > Themes.
2. Find your Horizon theme (or the duplicate you're working on) and click Customize.
3. In the theme editor, navigate to the Header section. You might need to click on the header area in the preview or find it in the left-hand sidebar under 'Sections'.
4. Look for an option labeled Custom CSS. This is usually near the bottom of the section settings.
5. Paste the combined CSS code into the custom CSS box:

.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;
}

6. 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. Only use this if you're comfortable with code and have backed up your theme.

1. From your Shopify admin, go to Online Store > Themes.
2. Find your Horizon theme (or the duplicate) and click the Actions dropdown, then select Edit code.
3. In the left-hand sidebar, find the theme.liquid file under the 'Layout' directory and click on it.
4. Scroll to the very bottom of the file, just before the closing tag.
5. Add the following code block, wrapping the CSS in

   Here's a visual example of the result provided by Moeed:

   
   6. Click Save.

   And there you have it! This small but impactful customization can make a big difference in how polished and professional your navigation feels. It's a great example of how a little custom CSS, and a helpful community, can unlock the full potential of your theme. Don't be afraid to experiment with these values and see what works best for your brand. Remember, creating a unique and engaging online presence is key to success, whether you're just starting your Shopify store or looking to refine an existing one. Happy customizing!