Invisible header side menu

[Shani-Swim]

I have an invisible header side menu white

but when I scroll down and the header become black for the website also the side menu become black and impossible to see the content.

Is there anyway to fix it please?

[niraj_patel · Accepted solution]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
header.header.scrolled-past-header .header__menu-item.list-menu__item {
color: #fff !important;
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[topnewyork]

Hi @Shani-Swim ,  can you kindly share your store URL. 


Thanks!

[Shani-Swim]

Sure- here is the link:
https://036fa1-f4.myshopify.com/

[niraj_patel · Accepted solution]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
header.header.scrolled-past-header .header__menu-item.list-menu__item {
color: #fff !important;
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Shani-Swim]

Thank you dear, is solve the problem.

[Shani-Swim]

Hi Niraj it worked on desktop but not on mobile. How do I apply it also on mobile please?

[niraj_patel]

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .menu-drawer__inner-container ul.menu-drawer__menu.list-menu li a, .menu-drawer summary.menu-drawer__menu-item,      button.disclosure__button.localization-form__select.localization-selector {
  color: #fff !important;
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Shani-Swim]

when scrolled down yes

but when we are up on the invisible mode header no.

[hiba665]

Hello sir I need your help , I'm facing a problem in tablet and mobile view , when I click the burger icon a white transaprent backaground aprears instead of the menu , help me please to solve it 

here it is my website I used dawn them : https://www.cozmic.me/ 

[oscprofessional]

Hi @Shani-Swim 

Go to Shopify Admin -> Online Store ->Theme -> Edit code->base.css

Add this css code in the end of the base.css file.

.scrolled-past-header .header__submenu .header__menu-item {
    color: #fff !important;
}

[Shani-Swim]

The first solution worked for me but thank you for the fast answer.

[Shani-Swim]

it work but on mobile it did not change so we still see black.

[Shani-Swim]

on mobile now I have it white on white when we scroll up

[BSSCommerce-HDL]

Hi @Shani-Swim, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

{% if template.name == 'index' %}
    <style>
       header.header.scrolled-past-header .header__menu-item {
         color: #ffff !important;
       }
    </style>
{% endif %}

 Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL]

Hi @Shani-Swim, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

{% if template.name == 'index' %}
    <style>
       ul.menu-drawer__menu.list-menu li a,
       .menu-drawer summary.menu-drawer__menu-item,
       button.disclosure__button.localization-form__select.localization-selector
       {
         color: #ffff !important;
       }
    </style>
{% endif %}

 Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL]

Hi @Shani-Swim, i update code. Pls replace my old code to this code : 

{% if template.name == 'index' %}
    <style>
       .scrolled-past-header ul.menu-drawer__menu.list-menu li a,
       .scrolled-past-header .menu-drawer summary.menu-drawer__menu-item,
       .scrolled-past-header button.disclosure__button.localization-form__select.localization-selector
       {
         color: #ffff !important;
       }
    </style>
{% endif %}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL]

@Shani-Swim, Pls check this above code 

[Shani-Swim]

on Mobile we have a white background when we are on the top scroll header

on Desktop mode it work fine so I need it also on mobile mode please.

[BSSCommerce-HDL · Accepted solution]

@Shani-Swim, Remove old code change to this new code: 

{% if template.name == 'index' %}
    <style>
       .scrolled-past-header ul.menu-drawer__menu.list-menu li a,
       .scrolled-past-header .menu-drawer summary.menu-drawer__menu-item,
       .scrolled-past-header button.disclosure__button.localization-form__select.localization-selector
       {
         color: #ffff !important;
       }
    </style>
{% endif %}

Hope this can help you 😍

[Shani-Swim]

also did not work I still have on mobile the same issue.

[Shani-Swim]

Worked like magic! thank you very much.