Dawn theme: Hamburger menu links do not work

Store Design
1

Hello! I’m working on the navigation menu but the links do not work currently - I have a feeling it’s due to the transparent sticky menu code that I added.

Web preview: https://0838d4-6c.myshopify.com/ (password: betwew)

Can you guys advise? Let me know what you need (code preview of a specific section, etc.)

Thanks!

1 Like
2

Hey @testchaglo

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1728290724764.png
Moeed_0-1728290724764.png401×509 10.1 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Thank you. It worked!

Another question I have would be:
How do I get the ‘x’ button be black in colour at the top but also remain black when I scroll down?

Currently it’s white at the top so it can be seen.

4

Hey @testchaglo

Keep the previous code and add this new code above in the end of theme.liquid file.

summary.header__icon.header__icon--menu.header__icon--summary.link.focus-inset {
    filter: invert(1) !important;
}

RESULT:

Moeed_0-1728296353031.png
Moeed_0-1728296353031.png394×577 4.2 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

5

Hey man, thanks!

The ‘X’ icon is black, but this also made the hamburger menu icon black however (I still want to keep that white).

I also have this code added previously so I’m not sure if it clashes with your new code.


{% if template == ‘index’ %}
.section-header .header-wrapper * { color: #fff; }
.section-header .header-wrapper .header__heading-logo { filter: invert(1); }
.section-header .header-wrapper { background: transparent; }

#MainContent { margin-top: -153px; }
.section-header.scrolled-past-header .header-wrapper { background: #fff !important; }
.section-header.scrolled-past-header .header-wrapper .header__heading-logo { filter: unset !important; }
.section-header .header-wrapper .mega-menu__link,
.section-header .header-wrapper .list-menu__item,
.section-header.scrolled-past-header .header-wrapper * { color: #121212bf !important; }

@media (max-width: 749px) {
#MainContent { margin-top: -97px; }
}
{% endif %}

.header__icon--menu[aria-expanded='true']::before { width: auto !important; } summary.header__icon.header__icon--menu.header__icon--summary.link.focus-inset { filter: invert(1) !important; }
6

Hello! Thanks for this, but this code also made my hamburger menu icon black (I want to keep that white when it’s at the top).

I also have this code added previously (attached in bold below) — I’m not sure if it affects yours.


{% if template == ‘index’ %}
.section-header .header-wrapper * { color: #fff; }
.section-header .header-wrapper .header__heading-logo { filter: invert(1); }
.section-header .header-wrapper { background: transparent; }

#MainContent { margin-top: -153px; }
.section-header.scrolled-past-header .header-wrapper { background: #fff !important; }
.section-header.scrolled-past-header .header-wrapper .header__heading-logo { filter: unset !important; }
.section-header .header-wrapper .mega-menu__link,
.section-header .header-wrapper .list-menu__item,
.section-header.scrolled-past-header .header-wrapper * { color: #121212bf !important; }

@media (max-width: 749px) {
#MainContent { margin-top: -97px; }
}
{% endif %}

.header__icon--menu[aria-expanded='true']::before { width: auto !important; } summary.header__icon.header__icon--menu.header__icon--summary.link.focus-inset { filter: invert(1) !important; }
7

Hello, thanks for this but it made my hamburger menu icon black as well (which I want to keep white only at the top).