Hi, I use the Brooklyn theme. I want to have a sticky header. I’ve managed to do this via custom code. However, the header is not working smoothly. The sticky header at the home page is still transparent.
At the other pages the sticky header blocks a part of the content.
I’ve added the following custom code theme.scss.liquid:
.header-wrapper {
position: fixed;
z-index: 1;
background-color: #000000 ({{ settings.color_body_bg }}, 0.0);
width: 100%;
}
.header-sticky .header-wrapper {
background-color: black;
@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;
}
}