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

[IbrahimW]

Hi,

I added this code before the </head> 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 · Accepted solution]

Hi @IbrahimW 

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

{% if template == 'index' %}
<style>
nav#navbar-mobile {
    background-color: transparent !important;
    position: fixed;
    left: 0;
    right: 0;
}
</style>
{% endif %}

[Dan-From-Ryviu · Accepted solution]

Hi @IbrahimW 

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

{% if template == 'index' %}
<style>
nav#navbar-mobile {
    background-color: transparent !important;
    position: fixed;
    left: 0;
    right: 0;
}
</style>
{% 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 · Accepted solution]

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!