Dropdown menu on header wonky after transparency added

Solved

Dropdown menu on header wonky after transparency added

rachelgongster
Tourist
11 1 3

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! ❤️

 

Accepted Solutions (2)

Made4uo-Ribe
Shopify Partner
8777 2099 2575

This is an accepted solution.

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:

Made4uoRibe_0-1715980774993.png

One this I cant figure it out yet is the when the header transparent. 

Made4uoRibe_1-1715980815476.png

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Made4uo-Ribe
Shopify Partner
8777 2099 2575

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. 

Made4uoRibe_0-1716048774779.png

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Replies 6 (6)

Imogen
Shopify Staff (Retired)
2045 227 397

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!

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

Made4uo-Ribe
Shopify Partner
8777 2099 2575

This is an accepted solution.

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:

Made4uoRibe_0-1715980774993.png

One this I cant figure it out yet is the when the header transparent. 

Made4uoRibe_1-1715980815476.png

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
rachelgongster
Tourist
11 1 3

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.

Screenshot 2024-05-18 at 9.50.31 AM.png

 

2) The text is white when you land on all the category pages (L2 & L3 pages) and it only turns white upon scrolling down).

 Screenshot 2024-05-18 at 9.50.48 AM.png

 

 

Can anyone help with this? Thank you sooo much! 

 

Best,

Rachel

Made4uo-Ribe
Shopify Partner
8777 2099 2575

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. 

Made4uoRibe_0-1716048774779.png

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
rachelgongster
Tourist
11 1 3

Thank you SO MUCH @Made4uo-Ribe.

 

Everything works like a charm - for #1, the code was in header.liquid. 

 

#1 - Fixed

Screenshot 2024-05-19 at 1.37.22 AM.png

 

#2 - Fixed 

Screenshot 2024-05-19 at 1.38.09 AM.png

 

Thanks again!

Made4uo-Ribe
Shopify Partner
8777 2099 2575

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.