Solved

Adding a transparent header on single page (Broadcast theme)

lbmedia1
Excursionist
35 3 4

I'm looking to recreate the homepage header on a different page.

 

Homepage: The header is transparent and when you scroll it turns white.

I want to be able to do that on one other page.

 

URL: https://0pbnb2ykvzx0kf49-59520712854.shopifypreview.com

 

Page I want to be able to add the transparent header - Originals


Any ideas? thanks in advance

Accepted Solution (1)
lbmedia1
Excursionist
35 3 4

This is an accepted solution.

I actually solved it myself!

 

I edited the header.liquid file to add

 

elsif handle contains 'originals'
assign transparent_header = true
elsif handle contains 'uv'
assign transparent_header = true

 

and this allowed the same transparent header to show up on those pages!

View solution in original post

Replies 8 (8)

KetanKumar
Shopify Partner
36839 3635 11972

@lbmedia1 

yes please give me single page url 

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
KetanKumar
Shopify Partner
36839 3635 11972

@lbmedia1 

thanks for code do you have add sticky header code?

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
lbmedia1
Excursionist
35 3 4

Hey @KetanKumar yes I want to keep it as sticky (it current is)

.js__header__stuck {
position: fixed;
width: 100%;
top: 0;
z-index: 6000;
}


I just don't know how to make the single page (originals) transparent (and then white as I scroll).

KetanKumar
Shopify Partner
36839 3635 11972

@lbmedia1 

do you mean like this?

KetanKumar_0-1634944628519.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
lbmedia1
Excursionist
35 3 4

Yes! and as the user scrolls it goes back to the white background. Just like this page: https://scarlett-grae.myshopify.com/
@KetanKumar 

lbmedia1
Excursionist
35 3 4

I was looking at the header.liquid 

this is what is in there 

{%- liquid
assign transparent_header = false
if template contains 'collection' and collection.image and section.settings.transparent_collection
assign transparent_header = true
elsif template contains 'article' and article.image and section.settings.transparent_article
assign transparent_header = true
elsif template == 'index' and section.settings.transparent_home
assign transparent_header = true
endif

I'm wondering if there is a way to add the originals page in here.
I tried this:  elsif template == 'original' and section.settings.transparent_original
assign transparent_header = true

But with no luck!

Any ideas @KetanKumar 

lbmedia1
Excursionist
35 3 4

This is an accepted solution.

I actually solved it myself!

 

I edited the header.liquid file to add

 

elsif handle contains 'originals'
assign transparent_header = true
elsif handle contains 'uv'
assign transparent_header = true

 

and this allowed the same transparent header to show up on those pages!

KetanKumar
Shopify Partner
36839 3635 11972

@lbmedia1 

great thanks for update and share code 

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