How do I transform my desktop menu into a mobile-style hamburger menu?

Store Design

Topic summary

Goal: change the Dawn theme’s desktop navigation to a mobile-style hamburger menu.

  • Initial attempt: OP added CSS to theme.css as advised elsewhere; no effect. A responder clarified that Dawn uses base.css (not theme.css) and shared a screenshot indicating the correct file.

  • Proposed fix: A code snippet targeting desktop (min-width: 1024px) was provided to hide the inline menu and show the header-drawer (hamburger) on desktop. OP added it to base.css but reported no change to the desktop menu.

  • Additional input: Another reply shared a mobile-only media query (max-width: 749px), which does not address the desktop-to-hamburger requirement. OP still saw no effect.

  • Current status: Unresolved. Support requested the store link to investigate and provide a precise solution.

  • Key details: The change hinges on editing the correct stylesheet (base.css) and using desktop-targeted CSS to display the header-drawer while hiding the inline menu. Further debugging on the live store is needed.

Summarized with AI on January 30. AI used: gpt-5.
1

Hello!

How do i change my desktop menu to a hamburger menu like its on the mobile version? for dawn theme most updated.

Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->theme.css is some information provided

but it dosent work?
Thank you!

2

Hello @kickduo

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

Dawn theme uses base.css

Screenshot at Mar 13 21-33-24.png
Screenshot at Mar 13 21-33-24.png836×631 222 KB

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

3

thank you, so when pasting Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->theme.css (base.css) the desktop menu isn’t effected and isn’t turned into the burger menu that it is on mobile?

4

@kickduo
Add below code into base.css file

@media screen and (min-width: 1024px){
.header--top-center>.header__search, .header:not(.header--top-center) *>.header__search {display: none !important;}
.header:not(.header--middle-left) .header__inline-menu { display: none !important;}
.header--top-center *>.header__search, .header:not(.header--top-center)>.header__search { display: inline-flex !important;}
header-drawer {display: block !important;}
}
5

@kickduo

Affect or not is by you add css code
You can use css code for mobile only:

@media screen and (max-width: 749px) {

   //custom css code placed here will only affect mobile

}
6

unfortunately this docent work no change to the site menu

7

@kickduo

To provide you with the most precise solution in this case/ To make sure we catch your meaning right, could you please share store link?