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;
}
