Transparent Header not working (Brooklyn Theme Template)

Solved
nikoneex
Tourist
4 0 3

Hey all,

 

My site seems to have issues with saving the Enable Transparent Header setting.  I want to toggle it on so my logo overlays my first Slideshow section.  However, every time I save the update, my site is published as if the setting was off.  Even going back into the settings the option still remains checked, yet the site doesn't reflect the change.

 

Thanks in advance!

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
35898 3587 11606

This is an accepted solution.

Hello, @nikoneex 

1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste bellow code in the bottom of the file.

.site-header {
    background-color: transparent;
    position: absolute;
    width: 100%;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 14 (14)
KetanKumar
Shopify Partner
35898 3587 11606

Hello, @nikoneex 

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
nikoneex
Tourist
4 0 3

Thank you for assisting me.  https://uglywaffle.shop

password is "hello"

KetanKumar
Shopify Partner
35898 3587 11606

Hello, @nikoneex 

Thanks for URL.

did you like this?

Ugly Waffle Jewelry Online Shop.png

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
nikoneex
Tourist
4 0 3

Yup I wish to have it exactly like that. However, even after saving my changes, my header keeps displaying without the transparency like this:

 

Screen Shot 2020-04-27 at 11.02.18 AM.png

KetanKumar
Shopify Partner
35898 3587 11606

This is an accepted solution.

Hello, @nikoneex 

1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste bellow code in the bottom of the file.

.site-header {
    background-color: transparent;
    position: absolute;
    width: 100%;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
nikoneex
Tourist
4 0 3

This worked perfectly. Thank you so much! 

Schreiberlul
New Member
1 0 1

This just broke my website completely. Now its all sorts of messed up. Sweet.

KetanKumar
Shopify Partner
35898 3587 11606

@Schreiberlul 

Thanks for post.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
SergeiBlessed
New Member
1 0 1

How did you get the logo to perfectly match the background picture? Or did you completely outline the text to make it transparent?

KetanKumar
Shopify Partner
35898 3587 11606

Hello, @SergeiBlessed 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
kozikickz
New Member
1 0 1

I added this but isn't working for me.

 

https://kozikickz.myshopify.com/

 

kozikickz_0-1609702544955.png

 

KetanKumar
Shopify Partner
35898 3587 11606

@kozikickz 

Welcome to the Shopify community!
and Thanks for your question.

i can see this code work perfectly what's an issue?

KetanKumar_0-1609726605208.png

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
tkiplinger
New Member
1 0 1

I tried this and it worked to force the transparent header, however, it is ignoring the white (reversed) version of the logo/text that should appear when the transparent header option is selected. This makes the logo and text unreadable over the slideshow image. How can I fix this? Thanks.

ang04
Shopify Partner
1 0 0

Did you get a fix for this? I have the same problem - its not just a case of hard coding the background as transparent - we need to use the transparent settings/file that we have used in the theme.