Update [18.07.2024]
For the main header I have created a field in the header module which gets the main login link icon file and shows it as an image
<img id="noordlease_login_icon" src="{{module.login_link_icon}}" alt="login link icon" width="20" height="20"><span style="text-transform: none;"> {{module.login_link_text}}</span>
For now I used a temprary solution which for the pages with a transparent header, I add the code below to the header tag
<style>
#noordlease_login_icon {content: url(https://144575582.fs1.hubspotusercontent-eu1.net/hubfs/144575582/Website%20-%20assets/Website%20-%20logos/SVG/Logo%20Noordlease%20Juli%202024%20RGB_Noordlease%20Beeldmerk%20-%20wit.svg) !important;}
</style>
Main challenge
My challenge today for Noordlease is about the fact that on some transparent headers, the login logo which I created manually in the header module, should be converted to white.
That means I need to find a solution to
1- Replace the proper icon in the module
2- Find a way to replace the image using CSS
3- Find a CSS to change it and invert the icon color
For noe, I will leave it to make sure the other parts are created, then I will get back to it. this should also solve the problem when scrolling on the black background.