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

Solved

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

IbrahimW
Excursionist
26 0 7

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!

 

Screenshot 2024-07-05 233131.pngScreenshot 2024-07-05 233114.pngScreenshot 2024-07-05 221418.pngScreenshot 2024-07-05 221347.png

Kind regards,
Ibrahim W.

Accepted Solutions (2)

Dan-From-Ryviu
Shopify Partner
8531 1681 1692

This is an 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 %}

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu
Shopify Partner
8531 1681 1692

This is an 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);
}

Screenshot 2024-07-11 at 09.39.26.png

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 7 (7)

Dan-From-Ryviu
Shopify Partner
8531 1681 1692

This is an 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 %}

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

IbrahimW
Excursionist
26 0 7

Thanks A Bunch!
It worked very well.

Dan-From-Ryviu
Shopify Partner
8531 1681 1692

Very welcome!

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

IbrahimW
Excursionist
26 0 7

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:
Screenshot 2024-07-10 220101.png

 

 

Dan-From-Ryviu
Shopify Partner
8531 1681 1692

This is an 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);
}

Screenshot 2024-07-11 at 09.39.26.png

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

IbrahimW
Excursionist
26 0 7

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

Dan-From-Ryviu
Shopify Partner
8531 1681 1692

Thanks and welcome! 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.