Dawn theme: Hamburger menu links do not work

[testchaglo]

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!

[Moeed · Accepted solution]

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 </body> tag

<style>
.header__icon--menu[aria-expanded='true']::before {
    width: auto !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[testchaglo]

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.

[Moeed]

Hey @testchaglo 

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

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

RESULT:

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

Best Regards,
Moeed

[testchaglo]

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.

<style>
{% 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 %}
</style>

<style>
.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;
}
</style>

[testchaglo]

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.

<style>
{% 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 %}
</style>

<style>
.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;
}
</style>

[testchaglo]

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