Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
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:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
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.
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
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>
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>
Hello, thanks for this but it made my hamburger menu icon black as well (which I want to keep white only at the top).
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024