Annoucement bar auto-dissappear when scrolling down

designpassion
New Member
2 0 0

Hi there, I managed to make my header sticky but would like the announcement bar disappear when scrolling down.

You help would be highly appreciated. Thank you so much.

I used the following code to make the header sticky.

 

.header-wrapper, .header-container {
position: fixed;
z-index: 1;
background-color: #ffffff;
width: 100%;
}
.header-sticky .header-wrapper {
background-color: rgba({{ settings.color_body_bg }}, 1);
@include at-query($min, $medium) {
.logo img{
height: 50px;
}
}
.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 {
}
.main-content {
padding-top: 40px;
}

/*Bof padding non index pages*/
body:not(.template-index) .main-content {
padding-top: 160px;
}
/*Eof padding non index pages*/

.shopify-payment-button {
z-index: 0;
}

0 Likes