How to make header sticky but NOT the announcement bar

Zachyssek
Tourist
9 1 0

Hi,

 

how can I make my header sticky but NOT the announcement bar?

I have both sticky right now but I'd like to have sticky only header and after scrolling down the announcement bar has to disappear. 

I am using BROOKLYN THEME.

 

I have the code bellow right now in theme.scss.liquid:

 

.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 {
}


.header-wrapper.fixed-header {
transition: all 0.9s;
background: #000;
transform: translateY(-42px);
}

 

This make sticky both the announcement and the header together.

I want only the header and after scrolling down the announcement bar should disappear.

 

What should I add to the code?

 

Thank you,

BEST REGARDS,

VIT ZACHARIAS

VIT ZACHARIAS
Replies 3 (3)
KetanKumar
Shopify Partner
24919 2497 9033

@Zachyssek 

can you please share your store 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
Zachyssek
Tourist
9 1 0

Yes I can. 

https://tovishop.com/

But the announcement bar is turned off for now till I figure out how to do it.

 

VIT ZACHARIAS
Zachyssek
Tourist
9 1 0

Could you please help me?

VIT ZACHARIAS