Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi there,
I'm facing problems with my site after adding a transparent header and sticky menu (www.mykinchan.com).
I've got 2 questions:
1) Against the transparent header, the menu options with the dropdowns are black (cannot be read), while the options without dropdowns are white. How do I make all the menu options white?
2) When I scroll down, the background of the dropdown menu remains transparent, even though I want it to turn white, to match the header and so the options are readable. How should I revise by base css code for this?
Thanks so much in advance! ❤️
Solved! Go to the solution
This is an accepted solution.
check this one.
From your Shopify admin dashboard, click on "Online Store" and then "Themes".
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
nav.header__inline-menu a {
color: white !important;
}
.scrolled-past-header sticky-header .list-menu__item a {
color: black !important;
}
svg.icon.icon-caret {
color: white;
}
.scrolled-past-header sticky-header svg.icon.icon-caret {
color: black;
}
.scrolled-past-header sticky-header details[open]>.header__submenu {
background: white !important;
}
And Save.
Result:
One this I cant figure it out yet is the when the header transparent.
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
This is an accepted solution.
Your welcome,
1st, You have some code in the theme.liquid. or in other file that you add. I cant over ride it.
If you know where is this located, I just want you to change the min-width: 989px because that is the screen where your hamburger menu shows.
2. Sorry about that I didnt check your other pages. Please follow the instruction below.
From your Shopify admin dashboard, click on "Online Store" and then "Themes"
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag.
{% if template == 'index' %}
<style>
nav.header__inline-menu a {
color: white !important;
}
.scrolled-past-header sticky-header .list-menu__item a {
color: black !important;
}
svg.icon.icon-caret {
color: white;
}
.scrolled-past-header sticky-header svg.icon.icon-caret {
color: black;
}
.scrolled-past-header sticky-header details[open]>.header__submenu {
background: white !important;
}
</style>
{% endif %}
And save.
And remove the code that I give you on the base.css. Thanks!
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Hi there, @rachelgongster! Thanks for taking the time to reach out to the Shopify Community with your questions around your header and your dropdown menus! My name is Imogen. It's good to meet you!
Shopify Support Staff aren't trained on coding, so I wouldn't be able to advise on what coding to change to help with your dropdown backgrounds changing depending on the content behind it on the screen, but we may be able to lend a hand with the menu options all being the same colour! I just have a few questions I need some insight on first:
Follow up with us here when you can! We'll keep our eyes peeled for your reply!
Imogen | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
This is an accepted solution.
check this one.
From your Shopify admin dashboard, click on "Online Store" and then "Themes".
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
nav.header__inline-menu a {
color: white !important;
}
.scrolled-past-header sticky-header .list-menu__item a {
color: black !important;
}
svg.icon.icon-caret {
color: white;
}
.scrolled-past-header sticky-header svg.icon.icon-caret {
color: black;
}
.scrolled-past-header sticky-header details[open]>.header__submenu {
background: white !important;
}
And Save.
Result:
One this I cant figure it out yet is the when the header transparent.
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Thank you so much!! This was exactly what I was looking for.
Unfortunately, there are still 2 issues that need to be fixed:
1) When I'm not at full screen on desktop, the text in the drawer becomes white and so users can't read it.
2) The text is white when you land on all the category pages (L2 & L3 pages) and it only turns white upon scrolling down).
Can anyone help with this? Thank you sooo much!
Best,
Rachel
This is an accepted solution.
Your welcome,
1st, You have some code in the theme.liquid. or in other file that you add. I cant over ride it.
If you know where is this located, I just want you to change the min-width: 989px because that is the screen where your hamburger menu shows.
2. Sorry about that I didnt check your other pages. Please follow the instruction below.
From your Shopify admin dashboard, click on "Online Store" and then "Themes"
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag.
{% if template == 'index' %}
<style>
nav.header__inline-menu a {
color: white !important;
}
.scrolled-past-header sticky-header .list-menu__item a {
color: black !important;
}
svg.icon.icon-caret {
color: white;
}
.scrolled-past-header sticky-header svg.icon.icon-caret {
color: black;
}
.scrolled-past-header sticky-header details[open]>.header__submenu {
background: white !important;
}
</style>
{% endif %}
And save.
And remove the code that I give you on the base.css. Thanks!
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Thank you SO MUCH @Made4uo-Ribe.
Everything works like a charm - for #1, the code was in header.liquid.
#1 - Fixed
#2 - Fixed
Thanks again!
Oh, good thing it work. 😊 Welcome. The color was so confusing and mix up with code which is black which is white.. 😅
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