How to change horizontal menu in Horizon theme into hamburger style?

Store Design
, ,

Topic summary

A user wants to convert the Horizon theme’s horizontal desktop menu into a hamburger-style menu (like the mobile version) for their clothing brand website.

Attempted Solutions:

  • User tried CSS codes from other themes without success
  • One developer provided CSS code to add to base.css file:
    @media screen and (min-width: 750px) {
  .header__drawer{display: block !important;}
  header-menu.header-menu {display: none !important;}
}
  • This CSS solution did not produce the desired changes

Current Status:

  • Multiple developers requested the store URL to provide targeted solutions
  • One developer sent a collaborator request and created a duplicate theme with modifications
  • The issue remains unresolved as the provided CSS didn’t work
  • Discussion is ongoing, awaiting user feedback on the duplicate theme solution
Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

Hi guys,
I have been trying to create a website for my clothing brand, so far i find horizon theme best suitable for it but unfortunately the menu is giving me a trouble. I don’t want it horizontal, instead i want it to be similar to how it is on mobile, in hamburger style. i tried other codes listed for other themes but unfortunately nothing is working for me. can someone please help with this?

1 Like
2

@jeninc by default the menu on mobile should be hamburger, so media query css can help, can you please share your website link?

3

Hi there,

Thanks for sharing the details—and you’re absolutely on the right track with choosing the Horizon theme for a clothing brand; it has a clean and modern look that works really well for fashion.

As for customizing the menu to appear in a mobile-style (hamburger) layout on desktop, that’s definitely achievable, but it does require some targeted code adjustments specific to Horizon’s structure. I’ve implemented similar customizations on Shopify themes before, and I’d be happy to take care of this for you to ensure it functions smoothly across all devices without breaking any other layout elements.

Let me know if you’d like me to handle this—happy to help!

4

I want hamburger style on desktop, the same way it is in mobile.

6

Hi thank you so much! I will be grateful.

7

can you please share website link??

1 Like
8

Hi @jeninc

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

1 Like
11
  • Login to your Shopify Admin.
  • In the bottom-left corner, click on Settings.
  • Click Users and permissions.
  • Scroll down to the Collaborators section.
  • You’ll see a Collaborator request code — it’s usually a 4-digit number (e.g., 1234).
  • Copy that code and send it to me here.
1 Like
13

Hi @jeninc
I’ve sent you the request — please accept it.

1 Like
14

please add this css to the very end of your base.css file and check

@media screen and (min-width: 750px) {
.header__drawer{display: block !important;}
header-menu.header-menu {display: none !important;}
}

image
image1366×768 104 KB

1 Like
15

Hi, thank you so much but i did not find any changes

1 Like
16

Hi @jeninc

I have created a duplicate theme and made changes in it; you can check it.

1 Like