Dropdown menu on header wonky after transparency added

[rachelgongster]

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!

[Imogen_1]

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:

• Can you let me know what theme you’re using in your store?
• Have you used any custom coding in your theme already to adjust your dropdown menus/transparent banner?
• Are your menu header options all the same colour when using a different style of header? (So not a transparent header)

Follow up with us here when you can! We’ll keep our eyes peeled for your reply!

[Made4uo-Ribe]

Hi @rachelgongster

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!

[rachelgongster]

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

[Made4uo-Ribe]

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 tag and paste the code below before the tag.

{% if template == 'index' %}

{% 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!

[rachelgongster]

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!

[Made4uo-Ribe]

Oh, good thing it work. Welcome. The color was so confusing and mix up with code which is black which is white..