How to move hamburger (drawer menu) to right side of the cart icon on desktop

Store Design
, ,

Topic summary

Goal: On Shopify’s Dawn theme, replace the desktop main menu with a hamburger (header-drawer) and position it to the right of the cart icon.

Initial approach: CSS hid the inline menu and showed the drawer only when the header didn’t use the “middle left” logo position. This failed if the store used that setting.

Update: Support recommended a broader selector to always hide the inline menu at ≥990px and show the header-drawer:

  • .header > .header__inline-menu { display: none !important; }
  • header-drawer { display: block !important; }

Progress: The logo was moved left and the menu became a hamburger. New issue: the hamburger appeared on a new line under the logo.

Proposed fix: In the desktop breakpoint, apply a grid layout to the “middle left” header variant:

  • body .header.header–middle-left { grid-template-columns: 1fr auto auto; }

Explanation: The grid creates three columns (flexible left, then two auto) to keep elements in one row, aligning the hamburger inline to the right side near the cart icon.

Status: A solution was provided; confirmation of final positioning is pending. Discussion remains open.

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

I am using Dawn theme.
I have used the following css in base.css to replace the menu with the hamburger menu on the desktop.

@media screen and (min-width: 990px){
.header:not(.header–middle-left) .header__inline-menu { display: none !important;}
header-drawer {display: block !important;}
}

However, I would like to have a hamburger menu to show the right side of the cart icon.

What do I have to add to make this happen?

Thank you for your help

2

Hello @TorontoDesign

It’s GemPages support team and glad to support you today.

I checked, your code won’t hide the main menu if the client chooses setting ‘Desktop logo position’
: ‘middle left’

Screenshot at Feb 08 23-49-33.png
Screenshot at Feb 08 23-49-33.png539×281 91.1 KB

You can try with the following code:

@media screen and (min-width: 990px){
   .header > .header__inline-menu { display: none !important;}
    header-drawer {display: block !important;}
}

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

3

Thank you so much. I was able to move logo to left and turn menu into hamburger menu.

However, hamburger menu is showing in new line under the logo.

How do I move hamburger menu to in-line with logo but to the very right (right side of cart icon)

Thank you.

4

@TorontoDesign

You can try with the following code:

@media screen and (min-width: 990px){
   .header > .header__inline-menu { display: none !important;}
    header-drawer {display: block !important;}
    body .header.header--middle-left{
       grid-template-columns: 1fr auto auto;
    }
}