Atelier theme - desktop menu drawer

Shopify Discussion
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?

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.

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?

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;
}
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>
13

Hi, I noticed on the desktop view that the hamburger menu icon is not aligned with the exit button (“X”) when the cart is open. Could we adjust the hamburger menu icon so that both are in the same position when opening and closing the cart drawer?

Thank you in advance.

Screenshot 2026-03-09 at 02.29.17
Screenshot 2026-03-09 at 02.29.171920×1073 149 KB

Screenshot 2026-03-09 at 02.30.10
Screenshot 2026-03-09 at 02.30.101920×1093 132 KB

14

It’s not an issue. As the Screen Size of your site, not matching with the position of Cross icon. Which refer to this align issue.

I am checking on my end which screen Size is almost 1800px. That say, its not aligning the with the cross icon. It’s way more far away.

See screenshot for more reference.

image
image1919×962 255 KB

Cross Icon showing way more far away.

15

Hey,

Thank you for this information. How can we make the header and icons compatible for all screen sizes ?

16

This is the global settings options. Which means you need to change the page width to the wide that is used in the cart drawer.