Adding a transparent header on single page (Broadcast theme)

Store Design
1

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

1 Like
2

@lbmedia1

yes please give me single page url

3

@lbmedia1

thanks for code do you have add sticky header code?

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).

5

@lbmedia1

do you mean like this?

KetanKumar_0-1634944628519.png
KetanKumar_0-1634944628519.png1920×1080 285 KB

6

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

7

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

8

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!

1 Like
9

@lbmedia1

great thanks for update and share code