Change transparent stick header to color when scrolling

Solved
Highlighted
New Member
7 0 0

Hi! I'm using the "Brooklyn" theme and I found code that changed my header to be sticky and right now I have it so it's transparent with white text against an image, but, when I start scrolling I want it to change to a color so you can actually see/read it. I've searched and searched and tried and tried but haven't found a solution that works with my theme. Also, is there any way to shrink the height of the header? It's a bit bulky. THANK YOU in advance any help is greatly appreciated!!!

 

This is the fixed header code I used:

 

.header-wrapper {
position: fixed;
z-index: 1;
background-color: rgba({{ settings.color_body_bg }}, 0.0);
width: 100%;
}
.header-sticky .header-wrapper {
background-color: rgba({{ settings.color_body_bg }}, 1);
@include at-query($min, $medium) {
.logo img{
height: 60px;
}
}
.site-nav {
transition: all .3s ease, height .8s ease;
-webkit-transition: all .3s ease, height .8s ease;
-o-transition: all .3s ease, height .8s ease;
margin-top:0 !important;
}
}
.header-sticky .header-wrapper {
}

0 Likes
Highlighted
Shopify Partner
7457 1032 2592

Hello, @brookehendy 

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
New Member
7 0 0

https://botana-bedding.myshopify.com/

 

I haven't published the theme I'm referring to yet though, just getting started.  And right now I have a different theme as my current "live" theme even though it's just the password page 

0 Likes
Highlighted
Shopify Partner
7457 1032 2592

This is an accepted solution.

ok, no problem if you can send password personal message, so I will check proper.
also, please which theme need you required this task.  

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
New Member
7 0 0

ok done

0 Likes
Highlighted
New Member
2 0 0

@brookehendy  were you able to figure this out? We're wanting the same thing for the same theme :) 

0 Likes
Highlighted
Shopify Partner
7457 1032 2592

Hello, @krau 

Thanks for post.
can you please share your store URL so I will provide a proper solution.

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
8 0 3

Can you publish the codes here. Then others also can get benefits from it 

2 Likes
Highlighted
Shopify Partner
7457 1032 2592

Hello, @suhailmsm 

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
3 0 2

Hi @KetanKumar  @brookehendy 

 

How are you doing? Have you found the solution? Having same problem.

 

Thanks!

 

Alba

www.mumka.es (Brooklyn)

1 Like