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?

[topnewyork]

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

Thanks!

[Shani-Swim]

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

[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;
}

[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 tag:

{% if template.name == 'index' %}
    
{% 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

[niraj_patel]

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 on theme.liquid

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

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]

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]

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

[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 tag:

{% if template.name == 'index' %}
    
{% 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

[niraj_patel]

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

.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; }

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

[BSSCommerce-HDL]

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

{% if template.name == 'index' %}
    
{% 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

[Shani-Swim]

when scrolled down yes

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

[BSSCommerce-HDL]

@Shani-Swim , Pls check this above code

[Shani-Swim]

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

[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]

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

{% if template.name == 'index' %}
    
{% 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.