Unlock the Desktop Hamburger Menu on Shopify's Horizon Theme

Hey everyone! I was just browsing through the Shopify community forums, and a really interesting discussion caught my eye, one that many of you might find super helpful. It was all about bringing that familiar hamburger menu, usually reserved for mobile, right into the desktop view of a Shopify store, specifically for those rocking the Horizon Theme 4.2.0. And let me tell you, it sparked some great insights and solutions from our fellow store owners and developers!

The original question came from saintmessi, who was looking for a way to achieve this consistent navigation experience across all devices. It's a common desire, right? We're so used to tapping that little three-line icon on our phones, and sometimes, seeing a full, sprawling menu on a desktop feels a bit, well, old-school. Plus, for stores with a ton of navigation links, a drawer menu can actually offer a cleaner, less cluttered look on larger screens too.

Understanding Horizon Theme's Default Menu Behavior

First, it's good to understand why your Horizon theme isn't doing this by default. As veed pointed out in the thread, Horizon 4.2.0 is pretty smart. It uses a small script to decide whether to show a "full menu" or a "hamburger drawer." It typically defaults to the drawer only on touch devices or when your menu links simply don't fit in the header space. On a standard desktop, it usually gives you the full menu.

The theme essentially checks two things: isTouchDevice (are you on a phone or tablet?) or hasReachedMinimum (is the screen narrow enough that the menu items won't fit?). If either is true, it opts for the drawer. Our goal here is to override that logic and force the "drawer" style regardless of device or screen size.

Solution 1: The Direct Theme Code Edit (Veed's Method)

One way to tackle this, as suggested by veed, involves a couple of direct edits to your theme's core files. This method essentially tells the theme, "Hey, always use the drawer menu, no questions asked."

Steps for Direct Code Edit:

1. Duplicate Your Theme: This is CRUCIAL! Before making any code changes, always go to Online Store > Themes, find your live theme, click the ⋯ (actions) button, and select Duplicate. Work on the copy so you don't break your live store.
2. Edit Code: On your duplicated theme, click ⋯ > Edit code.
3. Modify layout/theme.liquid:
   • Open layout/theme.liquid.
   • Search for menuStyle.
   • You'll find a line similar to this:

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

   • Change it to:

   headerComponent.dataset.menuStyle = 'drawer';

4. Modify assets/utilities.js:
   • Open assets/utilities.js.
   • Search for menuStyle again.
   • You'll find a line similar to this:

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

   • Change it to:

   headerComponent.dataset.menuStyle = 'drawer';

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

Important Note: Veed wisely pointed out that because these are direct code edits, a theme update will overwrite them. So, keep a note of these changes so you can reapply them if you update your Horizon theme in the future.

Solution 2: The Custom Liquid Section Approach (Ploqo's Method)

Another excellent approach, shared by Ploqo in the thread, uses the theme customizer's "Custom Liquid" section. This is often preferred because it's less invasive than editing core theme files directly, though it still injects code. This method also explicitly addresses a common issue saintmessi ran into: the search icon getting misplaced and the page freezing.

Initially, saintmessi reported that after applying an earlier version of this solution, the page would freeze when clicking the hamburger menu, and the search icon was stuck on the left. Ploqo then provided a revised, more robust solution that fixes both the menu behavior and the search icon's position.

Steps for Custom Liquid Section:

1. Go to Theme Customizer: From your Shopify admin, go to Online Store > Themes. Click Customize on your current theme (you can use your live theme for this if you're comfortable, as it's less direct code editing, but a duplicate is always safest).
2. Add Custom Liquid Section to Header:
   • In the theme editor, on the left sidebar, click on Header.
   • Scroll down within the Header group and click Add section.
   • Choose Custom Liquid from the options.
   • 
3. Paste the Code: In the Liquid code box within the new Custom Liquid section, paste the following code. This code includes both the necessary JavaScript to force the drawer menu and CSS to properly position the search icon on the right, next to Account and Cart, which was the specific fix Ploqo provided after saintmessi's feedback.
4. 
5. Save: Click Save in the top right corner.
6. 

With this revised code, you should see the hamburger menu working correctly on desktop, with the search icon gracefully positioned on the right side of your header, and no freezing issues. This solution is generally more forgiving with theme updates compared to directly editing .liquid files, as the Custom Liquid section usually persists.

So, there you have it! Two solid methods to get that desktop hamburger menu working on your Shopify Horizon 4.2.0 store. Whether you prefer a direct code edit or the Custom Liquid section, both approaches allow you to tailor your store's navigation to better suit your brand and user experience goals. Just remember to always test thoroughly after making any changes, and happy customizing!