Atelier theme - desktop menu drawer

Shopify Discussion

Topic summary

Request to convert the Shopify Atelier theme’s desktop navigation into a drawer-style (slide-out) menu similar to the mobile hamburger menu. The poster notes there’s no built-in Customize setting to switch desktop to a drawer layout and seeks the cleanest, most stable way to implement it via theme edits.

Goals:

  • Remove the desktop inline (horizontal) menu.
  • Show the hamburger icon on desktop.
  • Have the drawer open and function on desktop the same as on mobile.

The user is comfortable editing theme files and asks if others have successfully implemented this in Atelier, looking for best-practice guidance.

No solutions, code, or examples are provided yet, and there are no images or attachments referenced. The thread remains open with no confirmed approach or outcome at this time.

Summarized with AI on March 1. AI used: gpt-5.
1

Hi everyone,

I’m using the Atelier theme and would like to change the horizontal desktop navigation menu into a drawer style (slide-out) menu, similar to the mobile hamburger menu.

It doesn’t seem like there’s a built-in option in the Customize panel to switch the desktop layout to a drawer format.

What would be the proper way to achieve this?

Ideally, I’d like:
• The desktop inline menu removed
• The hamburger icon visible on desktop
• The drawer menu to open and function normally on desktop like mobile

I’m comfortable editing theme files if necessary I just want to make sure I’m doing it in the cleanest and most stable way.

Has anyone implemented this successfully in Atelier?

Thanks in advance for any guidance!

2

Hello there, can you share your site url and password so that I can take a look and provide you the solution code?

1 Like
3

Hey, link: RUNWAY

4

Thanks for your patience.

If you want to achieve the Drawer layout for Desktop same as mobile then you need to paste the following code share below in the end of styles.css file.

@media screen and (min-width: 750px) {
    #header-component[data-menu-style=menu] .header__drawer {
        display: block;
        min-height: 0;
    }
}
.menu-list {
  display: none !important;
}

Please put the code in the css file that I mentioned above. And then let me know if this works for you.

1 Like
5

The styles.css file doesn’t exist in the Atelier theme, so I added the code to base.css instead. However, after adding the code you shared, the desktop menu disappeared completely. There’s also no menu drawer showing on desktop (like the one on mobile)?

6

Is there a next step after pasting this code?

7

Can you show me in the screenshot on how you paste the code into it?

1 Like
8

Screenshot 2026-03-01 at 22.32.57
Screenshot 2026-03-01 at 22.32.571920×1034 176 KB

9

Thanks for sharing the screenshot. It helps a lot. Remove the code that you add and replace it with this one share below.

@media screen and (min-width: 750px) {
    #header-component[data-menu-style=menu] .header__drawer {
        display: block !important;
        min-height: 0;
    }
}
.menu-list {
  display: none !important;
}
1 Like
10

Thank you very much i highly appreciate it. This worked!

One question, the hamburger menu icon displays 2 lines rather than 3 lines. Is this possible to change?

11

You’re most welcome. And I am really happy that my code works.

I would be more than happy to assist you on how you can turn the Hamburger menu from 2 lines to 3 lines.

You need to first go to Edit Code. In the Edit Code section you need to search for header-drawer-icon After this class, there will be a SVG rendering there. Which means that a Hamburger SVG render in the assets files. Remove that render line and replace it with this 3 lines hamburger SVG.

Once you replace with the code above, then you’ll see the three lines instead of the two.

12

Here is the svg code. Above one is not showing anymore.

<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 50 50">
<path d="M 3 9 A 1.0001 1.0001 0 1 0 3 11 L 47 11 A 1.0001 1.0001 0 1 0 47 9 L 3 9 z M 3 24 A 1.0001 1.0001 0 1 0 3 26 L 47 26 A 1.0001 1.0001 0 1 0 47 24 L 3 24 z M 3 39 A 1.0001 1.0001 0 1 0 3 41 L 47 41 A 1.0001 1.0001 0 1 0 47 39 L 3 39 z"></path>
</svg>
1 Like