DAWN THEME - Change Mobile Menu Breakpoints

Store Design

Topic summary

Goal: shift Dawn theme’s header breakpoint so the mobile drawer (burger) shows up to 750px and the desktop inline menu from 750px and above.

Key changes proposed: update CSS media queries from 990px to 750px in base.css (header styles and .header__inline-menu) and in header.liquid (hide header-drawer from min-width: 750px). Media queries are CSS rules that apply at specific viewport widths; header-drawer is the mobile menu component.

Results: multiple users confirm the changes worked for them. However, the original poster reports a partial fix: the logo hides and the header grid layout changes between 750px and 989px, indicating other 990px-dependent styles still apply.

Evidence: screenshots were attached (links) to illustrate layout differences at 990px, 989px, and 749px; visuals are central to the reported issue.

Status and next steps: no final resolution for the logo/grid issue yet. Action item is to audit and adjust remaining Dawn CSS rules targeting 990px (e.g., header/logo/grid-related selectors) to align with the 750px breakpoint across all relevant components.

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

Hi,

Iam currently using the Dawn theme.

The screen width when the main navigation menu hides and the mobile drawer menu(burger icon) shows up is 990px. I need to change that to 750px. Basically..

  1. The mobile menu should show till ‘@media screen and (max-width: 750px)’

  2. Desktop menu should show from ‘@media screen and (min-width: 750px)’

Using the dawn theme out of the box and in its default state. Any help on this would be great.

Thank You

1 Like
2

Hi @ArjunW ,

You will need to make changes to both base.css and header.liquid.

base.css

First, go to line 1849 and change the media query from max-width: 900px to max-width: 750px

Old

@media screen and (min-width: 990px) {
  .header {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .header--has-menu:not(.header--middle-left) {
    padding-bottom: 0;
  }
// ...
// Rest of the code is hidden for demonstration purposes
}

New

@media screen and (min-width: 750px) {
  .header {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .header--has-menu:not(.header--middle-left) {
    padding-bottom: 0;
  }
// ...
// Rest of the code is hidden for demonstration purposes
}

Go to line 2156, and change the closest media query for .header__inline-menu to 750px.

Old

@media screen and (min-width: 990px) {
  .header__inline-menu {
    display: block;
  }

  .header--top-center .header__inline-menu {
    justify-self: center;
  }

  .header--top-center .header__inline-menu > .list-menu--inline {
    justify-content: center;
  }

  .header--middle-left .header__inline-menu {
    margin-left: 0;
  }
}

New

@media screen and (min-width: 750px) {
  .header__inline-menu {
    display: block;
  }

  .header--top-center .header__inline-menu {
    justify-self: center;
  }

  .header--top-center .header__inline-menu > .list-menu--inline {
    justify-content: center;
  }

  .header--middle-left .header__inline-menu {
    margin-left: 0;
  }
}

Last, change the media query for header drawer in header.liquid from

Old

@media screen and (min-width: 990px) {
    header-drawer {
      display: none;
    }
}

New

@media screen and (min-width: 750px) {
    header-drawer {
      display: none;
    }
}

If this solved your problem, don’t hesitate to like and declare the solution. Thank you

2 Likes
3

Hi,> > This only solves the issue partly. Whilst the main menu and mobile menu switch is happening properly at 750px instead of 990px, for some reason the logo hides itself at 990px and the grid layout changes. Basically, upon applying the above mentioned changes, the logo and grid is being affected between screen width 750px and 989px.> > Attaching screenshots of screen sizes 990px, 989px and 749px.> > http://prnt.sc/1v66rgy> > http://prnt.sc/1v66ulm> > http://prnt.sc/1v66vvv

Thank you so much for your reply.

4

Thanks! This fixed it for me!

5

I logged in to like this comment @elishaolade

6

Awesome. Thanks!