Reactive header and logo color (transparent header) Craft Theme

[atelierpampam]

Hello community !

I managed to apply a transparent header on the homepage of my website (theme CRAFT), change the text colour when transparent, and change the background color of my sticky header (see images below). But i still having some trouble to the colour of my logo, to applied the transparent header only on my homepage.

Here is the code I applied in base.css :

/* Transparent header */
{% if template.name == “index” %}
.header-wrapper{
background: transparent !important;
position: absolute;
width: 100%;
}
.header__active-menu-item,
.header__icon,
.header__menu-item {
color: #F8F7F3 !important;
}
{% endif %}

/* Sticky Header Color */
.shopify-section-header-sticky .header-wrapper{
background: var(–gradient-background) !important;
}
.shopify-section-header-sticky .header__active-menu-item,
.shopify-section-header-sticky .header__icon,
.shopify-section-header-sticky .header__menu-item {
color: rgba(var(–color-foreground),.75) !important;
}

I’m still looking a solution for:

-Change the color of my logo to off-white like the text on the transparent header, (it’s a PNG logo and it’s not black so the invert option doesn’t work for me)

-Change the color of the text of the drop-down menu in the transparent header, because currently it’s white on white

-On my other pages of the website, my transparent header also applies, even if I put an “{% if template.name == “index” %}” in my code so that it would only be applied to the home page.

Moreover, as you can see on the image, the transparent header is superposed on the top page, as if there was no more margin provided for the menu…

-Finally I noticed that when I scroll down, my announcement bar disappears, I have no idea if this is normal, or if my code changed this, but I wish 'it remains displayed above the sticky header..

That’s it, i know it’s a lot but if someone in the community have the solution i would be very very thankful

thank you very much in advance

Cécile.

[dmwwebartisan]

@atelierpampam

My pleasure to help you.
Welcome to the Shopify community!
Please share your store URL!
I will check out the issue and provide the correct solution to you!

Thanks!

[atelierpampam]

Hello thank you for your message !

My website isn’t published yet but i have a preview link : https://8h3vlp7cc1ps8632-55015473216.shopifypreview.com is this ok for you or i can share you the password !

[dmwwebartisan]

@atelierpampam

Please add the following CSS code to your assets/base.css bottom of the file.

.atelierpampam-gdpr .header__submenu {
    background: transparent !important;
    border: 1px solid #fff !important;
}

Thanks!

[atelierpampam]

Thank you for your answer, perhaps i was not very precise, i was searching to put the submenu text in black instead of white, but not have de background transparent, with your suggestion i tried this and it works ! :

.header__submenu .header__menu-item {
color: var(–color-base-text) !important;

But i still have the other problems to solve do have any ideas to for the other points ?

Thank you so much,

Cécile.

[atelierpampam]

Hello,

Did you see my last reply ? Do you have any idea to fix the other points i mentionned ? Thanks a lot for the help,

Cécile.