Unlock the Desktop Hamburger Menu in Shopify's Horizon Theme (and Fix That Search Icon!)

Hey there, fellow Shopify store owners! You know how it is – you're always looking for ways to refine your store's user experience, especially when it comes to navigation. Recently, I stumbled upon a really interesting discussion in the Shopify community that tackled a common design request: bringing that sleek, space-saving hamburger menu, typically reserved for mobile, to desktop view on the Horizon 4.2.0 theme.

Our friend saintmessi kicked off the thread, asking for exactly this. They wanted their desktop header to mirror the mobile experience with a clean hamburger icon, and they were using Horizon Theme 4.2.0. It's a great question, as consolidating navigation can really declutter a desktop header, especially for stores with extensive product categories.

Why Isn't the Hamburger Menu Standard on Desktop for Horizon?

One of the community experts, veed, jumped in with a fantastic explanation. Turns out, Horizon 4.2.0 is smart! It dynamically decides whether to show a 'full menu' or a 'hamburger drawer' based on a couple of factors: if the device is a touch device, or if the menu links simply don't fit within the header. On a typical desktop, you usually get the full menu, which is often what themes are designed to do by default.

Two Paths to Your Desktop Hamburger Menu

The community offered a couple of distinct approaches to achieve this, both involving a bit of code. Let's break them down:

Method 1: Direct Theme Code Modification (for the code-savvy)

veed provided a solid method for those comfortable diving directly into their theme's Liquid and JavaScript files. This approach ensures the hamburger menu is *always* present, regardless of screen size or link count. Keep in mind, this is a direct modification, so theme updates could potentially overwrite these changes.

1. Duplicate Your Theme: Before making any code changes, always, always duplicate your live theme. Go to Online Store > Themes, click ⋯ > Duplicate on your live theme, then ⋯ > Edit code on the copy. This is your safety net!
2. Edit layout/theme.liquid: Open this file and search for menuStyle. You'll find a line that looks like this:

headerComponent.dataset.menuStyle = isTouchDevice || hasReachedMinimum ? 'drawer' : 'menu';

Change it to:

headerComponent.dataset.menuStyle = 'drawer';

3. Edit assets/utilities.js: Next, open this file, search for menuStyle again, and change this line:

headerComponent.dataset.menuStyle = isTouchDevice() || hasReachedMinimum ? 'drawer' : 'menu';

to:

headerComponent.dataset.menuStyle = 'drawer';

4. Save and Preview: Save both files and preview your duplicated theme on desktop. You should now see the hamburger icon and the slide-out drawer.

Veed wisely noted that both edits are crucial: the first sets the style on page load, and the second ensures it stays that way even if the header resizes.

Method 2: Using the Custom Liquid Section (the more flexible approach)

Another expert, Ploqo, offered a solution that leverages Shopify's built-in 'Custom Liquid' section, which can often be a bit more resilient to minor theme updates since you're adding a section rather than editing core files directly. This method also evolved through the discussion to fix a couple of tricky issues saintmessi ran into.

Here's what Ploqo’s final, refined solution looks like, addressing the initial freezing problem and the search icon's misplaced position:

Before this fix, your desktop menu might look like a standard full menu:

After implementing the hamburger menu, saintmessi initially found the search icon appearing on the left, which wasn't ideal. The goal was to have it neatly aligned with the Account and Cart icons on the right. Ploqo's updated code addresses this, moving the search icon to the right, next to Account and Cart, making the header look like this:

Steps for Ploqo's Solution:

1. Go to Online Store > Themes.
2. Click Customize on your current theme.
3. In the Header group on the left, click Add section. (If you've already added Custom Liquid, you'll click on that existing section).
4. Choose Custom Liquid.
5. Click inside the Liquid code box and paste this code (if replacing old code, delete it first):

6. Click Save.

This code not only forces the hamburger menu (`data-menu-style='drawer'`) but also includes CSS to rearrange the header's grid layout, specifically moving the search icon (`.search-action`) to the `rightS` grid area, right where you want it alongside the account and cart icons. It’s a clever bit of CSS Grid magic!

Which Method Should You Choose?

Both methods achieve the desired outcome, but they have their nuances. If you’re comfortable with direct file editing and prefer a solution that integrates deeper into the theme's core logic, veed’s approach is solid. Just remember the theme update caveat.

Ploqo’s Custom Liquid method is often preferred for its ease of implementation through the theme customizer and its slightly more isolated nature, meaning it might be less prone to being overwritten by minor theme updates (though major theme overhauls could still impact it). It also directly addressed and fixed the specific layout issues saintmessi encountered, making it a robust solution for Horizon 4.2.0.

Whichever path you take, remember to always work on a duplicate theme first! Testing is key to ensuring everything works smoothly and your customers have a seamless experience. It's these kinds of community discussions that really highlight how adaptable and powerful Shopify can be, whether you're just starting your Shopify journey or fine-tuning an existing store.