Fix for Brief Display of Old Menu/header DAWN theme

Store Design
, , , ,
1

Hello!

I am using the dawn theme and my URL is carcleansweden.se.

I recently changed so my menu and logo, icons are on 2 different rows:

CarCleanCC_0-1734545731861.png
CarCleanCC_0-1734545731861.png1897×982 220 KB

I used this code in theme.liquid before the tag in order to split them to 2 different rows:

@media screen and (min-width: 990px) { .header--middle-left { grid-template-areas: "heading icons" "navigation navigation"; grid-template-columns: auto 1fr; grid-template-rows: auto; column-gap: 2rem; } nav.header__inline-menu { display: flex; justify-content: center; } }

So now it looks great but when I load the website or if I go to another page the old menu pops up for a small second:

CarCleanCC_1-1734545970161.png
CarCleanCC_1-1734545970161.png1891×981 217 KB

Is it possible to fix it? maybe replace some code or something like that?

I would hugely appreciate the help!

2

Hi @CarCleanCC , thanks for your information.

Upon checking, I noticed that you have successfully customized the CSS on your own. However, you placed the code at the end of the tag (), which causes your customizations to take effect only after the header has been rendered.

In this case, I recommend you continue using the same code but move it to the top, right after the tag. This way, the CSS will be read before the header is rendered, and the issue will be resolved.

I hope my solution is helpful to you, and please feel free to feedback.

Liz