Dawn theme: Hamburger menu links do not work

Solved

Dawn theme: Hamburger menu links do not work

testchaglo
Tourist
6 0 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!

Accepted Solution (1)

Moeed
Shopify Partner
5813 1579 1876

This is an 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:

Moeed_0-1728290724764.png

 

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

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 6 (6)

Moeed
Shopify Partner
5813 1579 1876

This is an 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:

Moeed_0-1728290724764.png

 

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

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


testchaglo
Tourist
6 0 1

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
Shopify Partner
5813 1579 1876

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:

Moeed_0-1728296353031.png

 

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

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


testchaglo
Tourist
6 0 1

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
Tourist
6 0 1

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
Tourist
6 0 1

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