Header menu acting strange at specific page widths - Dawn Theme

Store Design
, , ,

Topic summary

A Shopify store using the Dawn theme experiences header menu layout issues at viewport widths between 990px and 1125px. The menu displays incorrectly in this range, and the user wants it to match the intended mobile layout (shown via images) for all widths at or below 1125px.

Proposed Solutions:

  • Apply custom CSS using a media query targeting max-width: 1125px
  • Modify grid display properties: grid-template-areas: 'left-icons heading icons' and grid-template-columns: 1fr 2fr 1fr
  • Increase CSS specificity by targeting .section-header .header or adding !important flags
  • Alternative: directly edit base.css around lines 1342 or 2405 (requires theme backup)

Current Status:
The custom CSS solutions provided have not resolved the issue, even with !important declarations. This suggests an underlying code conflict is overriding the attempted fixes. The problem remains unresolved, and further investigation into the theme’s base CSS may be necessary.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Hello! We have a header menu which looks very bad when the page width is between 990 px and 1125 px. The first picture is an illustration of the way it looks, the other picture is the way we intend it to look at all page widths which are 1125px and below.

Does anyone know how to do this? Thank you in advance :black_heart:
Website - MAISON MAGDALENA
Password - MaisonMagdalena.222

MagdalenaBB_0-1723659704328.png
MagdalenaBB_0-1723659704328.png1385Ă—181 8.23 KB

  • 1

MagdalenaBB_1-1723659770752.png
MagdalenaBB_1-1723659770752.png1067Ă—137 7.43 KB

  • 2
2

Correction - it needs to be fixed between 990px to 1125px.

3

@MagdalenaBB use the 3 dots menu on the rightside of your post to edit the original post with clarification of the better description for the needed outcome.

4

CSS band-aid using a custom-css setting

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

@media screen and (max-width: 1125px) {
 .header {
   display: grid;
   grid-template-areas: 'left-icons heading icons';
   grid-template-columns: 1fr 2fr 1fr;
   align-items: center;
 }
}

Otherwise backup theme and modify base.css directly to change the grid rules in around line 2431 , .header–middle-center:not(.drawer-menu) , or adjust the media query that works use 990px around line 2045

5

Unfortunately, the custom CSS did not work. Thank you anyways!

6

Per above you may need to fix the underlying rules in base.css, or try to up the specificity of the rule

@media screen and (max-width: 1125px) {
 .section-header .header {
   display: grid;
   grid-template-areas: 'left-icons heading icons';
   grid-template-columns: 1fr 2fr 1fr;
   align-items: center;
 }
}

, or force it with “!important”,

@media screen and (max-width: 1125px) {
 .header {
   display: grid;
   grid-template-areas: 'left-icons heading icons' !important;
   grid-template-columns: 1fr 2fr 1fr;
   align-items: center;
 }
}
7

Unfortunately it still does not change, even if I call !important;
There must be some underlying issue in the code overriding it.
Thank your for your time.