Dawn Theme - Reactive header colour (transparent header)

[joedogfish]

Hello!

I’m getting incredibly close to resolving this, with great help from this community. So far my header when transparent on the home page is converting all font and icon colour to white (which is perfect) and when the header isn’t transparent (sticky header non-transparent when you scroll down) the correct font and icon colours are applied (which is also great). The final issue I’m facing here is down to when you navigate to any other page on the website, it seems that the header is technically transparent meaning the font and icon colour in the header are white on a white background making them invisible (which is not good).

Preview link: https://ctk6tcwbhdihjnqs-50708545699.shopifypreview.com

What I’m hoping for some help on is to make this snippet of code below in my base.css file to only be applicable to home page and no other pages?

code used is:

{% if .site-header-transparent #Details-HeaderMenu-9 > summary > span %}
color: white;
  {% endif %}
}
.site-header-transparent svg path {
fill: white;
}
 .site-header-transparent .header__heading-logo {
  filter: invert(100%);
}

reference images of the issue:

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find layout/theme.liquid and paste this at the bottom of the file:

{% if template.name != "index" %}

{% endif %}

[joedogfish]

THANK YOU!!!

[ZestardTech]

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.

[Eleftheria2022]

check my online store and let me know if you need the coding from my header.

its dawn theme and i changed to transparent header, and right below i have a slideshow with button that change images automatic.

[atelierpampam]

Hello !

I’m having the same kind of problem but this is hard to apply the correct code to fixe it, I’m a novice and it’s all still quite complex.

I managed to apply a transparent header on my homepage, change the text colour when transparent, and change the background color of my sticky header (see images below).

I am using the craft theme and here is the code I applied in base.css :

/* Barre de menu transparente */
{% 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 %}

/* Couleur Sticky Header */
.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;
}

However, 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 white on white

-As @joedogfish on my other pages of the site, my transparent header also applies, even if I put an “if” so that it would only be applied to the home page. The code you give to @joedogfish doesn’t work for me.

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 changes caused this, but I wish 'it remains displayed above the sticky header..

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

thank you very much in advance

Cécile.

[atelierpampam]

Hello @joedogfish @Eleftheria2022 ! i’m interested to see the code you use ! I can’t manage to apply my transparent header only on my home page it’s really frustated

Thank you for the help

[Eleftheria2022]

Tutorial for transparent header and flickity slideshow in jotting.com

(It’s recommended to use also the permanent sticky header for ultimate performance but not the tutorial from jotting.com, check on youtube for that.)

[marekjammine]

Hello, I have tried to paste the link but nothing changed. I tried another code and it made the header disappear under the announcements, maybe I am not placing the code in the right spot? Thanks!

[Eleftheria2022]

@marekjammine which change you want to make? Transparent header or reactive header?

[RadionPoints08]

I have transparent header in home when I scroll down my header background will be in white and my icons and menu will be in black everything is fine in home page when I see in product and other page my header was not in transparent and my background was still then I changed in green so I see my menu Item is still there…here I want my menu and icon in black and my logo should be in top center which is not in proper align send two picture of my home page and product page