Shopify Horizon Theme: Bold Your Header Menu Subcollections (Desktop & Mobile Solutions)

Hey there, fellow store owners! As someone who spends a lot of time diving into the Shopify community forums, I often see common pain points that many of you face. One topic that recently caught my eye involved customizing the header menu in the Horizon theme – specifically, how to make those important subcollection names really stand out.

That's exactly what MEZ_MUS, a dedicated store owner, was grappling with. They had their navigation menu beautifully organized into three levels, but wanted to make their Level 2 (subcollection) names bold. They knew it probably needed some coding, but weren't quite sure where to start with HTML or CSS. Sound familiar? It's a classic example of needing a small, targeted tweak that can make a big visual difference. Here's a look at MEZ_MUS's navigation menu structure and their desired outcome:

Making Your Desktop Header Menu Subcollections Pop

Thankfully, the community quickly stepped in, with Moeed providing a clear and effective solution. The core of the fix involved a small snippet of CSS code. For those new to CSS, it’s essentially the language browsers use to style your website – controlling colors, fonts, spacing, and more.

Moeed offered two straightforward ways to implement this code:

Option 1: Using the Theme Editor's Custom CSS

This is often the easiest route for small, targeted changes. You can usually find a "Custom CSS" field within the theme editor for specific sections.

1. Go to your Shopify Admin.
2. Navigate to Online Store > Themes.
3. Find your Horizon theme and click Customize.
4. In the theme editor, locate your Header section.
5. Look for an option like "Custom CSS" or "Custom Liquid" specific to that section.
6. Paste the following code into that field:

a.mega-menu__link.mega-menu__link--parent {
    font-weight: bold !important;
}

Option 2: Adding Code to your theme.liquid File

If a specific Custom CSS field isn't available, or for more global changes, adding the CSS directly to your theme.liquid file is a common practice. Just remember to always duplicate your theme before making direct code edits!

1. Go to your Shopify Admin.
2. Navigate to Online Store > Themes.
3. Find your Horizon theme, click Actions > Edit Code.
4. In the file editor, find the theme.liquid file under the "Layout" directory.
5. Scroll to the very bottom of the file, and paste the following code just above the tag:

Here’s a visual of what the result looks like, as shared by Moeed in the thread:

MEZ_MUS was thrilled, confirming that this code successfully made both their Level 2 and Level 3 subcollection links bold. It’s a great example of how understanding a little bit about CSS selectors can empower you to customize your store exactly how you envision it! Here's how it looked after MEZ_MUS applied the code:

Why Did That CSS Work? A Quick Peek Behind the Scenes

Let's break down that little CSS snippet for a moment: a.mega-menu__link.mega-menu__link--parent.

• a targets all link elements.
• .mega-menu__link and .mega-menu__link--parent are CSS classes that the Horizon theme uses to identify specific types of links within its mega menu structure. By targeting these specific classes, the code ensures that only the intended menu items (the parent links for subcollections) are affected, rather than every single link on your site.
• font-weight: bold !important; is the declaration that actually applies the bold styling. The !important flag is a CSS rule that gives this specific style declaration higher precedence, ensuring it overrides any other conflicting styles that might be defined elsewhere in the theme. It’s a handy tool for quick overrides, but should be used judiciously to avoid making future theme updates harder.

This explains why it worked for both Level 2 and Level 3 – those elements likely share these same CSS classes in the Horizon theme's structure.

The Mobile Menu Challenge

After successfully tackling the desktop view, MEZ_MUS rightly brought up the next crucial step: getting the mobile version to look just as good. This is where web design often gets a little trickier, as mobile menus often have entirely different structures and CSS classes to ensure they're responsive and user-friendly on smaller screens. Here's a look at MEZ_MUS's mobile menu:

MEZ_MUS initially asked for help with the mobile version. While the specific solution provided for the mobile menu wasn't explicitly detailed in the public thread, MEZ_MUS later updated the community, confirming they'd successfully got the mobile version working as expected. This is a common outcome in community support – sometimes a little more digging or another piece of advice (maybe privately, or by trial and error) leads to the final fix.

For those of you wondering how to approach mobile menu customizations, here's some general expert advice:

1. Inspect Element on Mobile: Use your browser's developer tools (often F12 or right-click > Inspect) and switch to mobile view. This allows you to inspect the HTML and CSS of your mobile menu directly. You'll likely find different class names for mobile menu items compared to desktop.
2. Look for Mobile-Specific Classes: Themes often use classes like .mobile-nav-item, .drawer-menu__link, or similar to style their mobile menus. Your goal is to identify these.
3. Use Media Queries: If the desktop CSS doesn't apply cleanly, or if you need different styles for mobile, media queries are your best friend. They allow you to apply CSS rules only when certain conditions (like screen width) are met.

For example, if your mobile menu items had a class like .mobile-menu-item, you might add something like this to your Custom CSS or theme.liquid:

@media screen and (max-width: 768px) {
    .mobile-menu-item {
        font-weight: bold !important;
    }
    /* Add any other mobile-specific adjustments here */
}

The max-width: 768px part tells the browser to apply these styles only when the screen width is 768 pixels or less, typically covering most tablet and mobile devices. You might need to adjust this breakpoint based on your theme's specific design.

The key takeaway here is that while the initial solution for desktop was straightforward, mobile often requires a bit more detective work to identify the correct selectors. But with the right tools (your browser's developer console!) and a basic understanding of CSS, it's totally achievable.

It's truly inspiring to see how store owners like MEZ_MUS tackle these challenges, and how the Shopify community rallies to help. Small CSS tweaks can profoundly impact your store's user experience and branding, making your navigation clearer and more engaging. Don't be afraid to experiment (on a duplicated theme, of course!) and leverage the incredible knowledge base available in the community. Happy customizing!