A Shopify store owner using the Refresh theme needs help implementing a dual-color header system:
Core Requirements:
Current Status:
The user found working code that handles the transparent-to-white header transition correctly, but encounters two specific issues:
Progress:
Multiple CSS solutions were attempted by community members (@niraj_patel, @topnewyork), but none fully resolved both issues. The user’s current code successfully handles the main header color transitions but needs refinement for the dropdown menu styling and mobile menu text visibility.
Remaining Challenge:
Finding CSS targeting that specifically addresses the “Hilfe” dropdown container and mobile menu text color without breaking the existing transparent header functionality.
Hi Guys,
I would like to ask if you could provide me with a code for the following:
On mobile, when the menu slider opens from the side (which has a white background), the text should remain black inside the menu
And i don’t want my logo to change colors also, logo should stay in one color
Thank you in advance for your help!
hello @katbuddies , I see you are using RERESH theme of shopify.
You can add below code by following these steps to color changes of menu items as you requested
Go to Online Store → Theme → Edit code.
Open your theme.liquid file
Paste the below code before on theme.liquid
@katbuddies
Hi , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
No it didn’t work, this code here does work but only problem is this this “Hilfe” container on white header text stays white
@media screen and (min-width: 750px) { .section-header .header-wrapper .list-menu span, .section-header .header-wrapper summary svg, .section-header .header-wrapper .disclosure__button>span, .section-header .header-wrapper .disclosure__button svg, .section-header .header-wrapper a svg{ color:#fff !important; } .section-header.shopify-section-header-sticky .header-wrapper .list-menu span, .section-header.shopify-section-header-sticky .header-wrapper summary svg, .section-header.shopify-section-header-sticky .header-wrapper .disclosure__button>span, .section-header.shopify-section-header-sticky .header-wrapper .disclosure__button svg, .section-header.shopify-section-header-sticky .header-wrapper a svg{ color:#000 !important; } }Remove this code, this is irrelevent code…
That code removed my transparent header its only white right now, i want it transparent but only text white
sticky-header.header-wrapper.color-scheme-2.gradient { background: white !important; }@katbuddies let me check again
No this code didn’t resolve my problem because it changed whole header white, i want it transparent with white text and on scrolling when header is white it should be black text
@katbuddies An extremly sorry for this, again i updated the code… try this one
Still not working could you please check my old code this does work like i need it, but only problem with this one is on mobile version when i pull out menu text is white and and background also white so you don’t see text. If you could make my mobile menu black background and also this container on “Hilfe” black background
Mobile version : https://streamable.com/6apgx4
Code:
{% if template == ‘index’ %}
{% endif %}
This container is only problem:
And transparent header with white text like this is perfect
