Transparent header background problem on product page and all other pages except main menu

[IbrahimW]

Hi,

I added this code before the tag in theme.liquid. It works fine on the main menu, but on the other pages, the logo overlaps the image or text below the header. I want the transparent header without margin only on the main menu but on the remaining pages I want transparent with a margin, is this a possible fix? I’m open to anything to fix this. This is the URL, www.barakatbazaar.com.
I also will attack photos to show you the problem to pages certain pages. I also want to change the colour of the icons in the header to the same as the logo. I want the logo to only be sticky when scrolled up. I hope this is not too much. I would appreciate this fix. Thanks in Advance!

Kind regards,
Ibrahim W.

[Dan-From-Ryviu]

Hi @IbrahimW

Please update your code into this make transparent header for the homepage only.

{% if template == 'index' %}

{% endif %}

[IbrahimW]

Thanks A Bunch!
It worked very well.

[Dan-From-Ryviu]

Very welcome!

[IbrahimW]

Sorry for the bother Dan, I would love it if you could help with a small fix.

I want arrows at the right side to indicate that these are dropdown texts.
I will share an image below:

[Dan-From-Ryviu]

Hi @IbrahimW

Please add this cod to Custom CSS in your Online Store > Themes > Customize > Theme settings

#product-accordion .accordion-button::after {
filter: invert(1);
}

[IbrahimW]

Thanks again, Dan! It is indeed people like you that make Shopify all the better.

[Dan-From-Ryviu]

Thanks and welcome!