Sticky headers, transparent background and top margin on Brooklyn theme

Store Design
1

I have added a sticky header using the Brooklyn theme, made it transparent but now need to add a top page margin so the header doesn’t overlap the page content. Have found the code for different elements, but not all together so it doesn’t corrupt. I am a novice CSS so any help appreciated. Website is www.3sixtyoutdoors.com TIA

2

@3sixtyoutdoors May this help you. Click Here.

3

Thank you however, that is what I have at the moment. My problem is the sticky header is covering the top of the pages so I need to add a top margin so my title isn’t covered like below:

3sixtyoutdoors_0-1660627123127.png
3sixtyoutdoors_0-1660627123127.png1936×292 36 KB

4

Hi @3sixtyoutdoors ,

You can solve it by using this CSS code

#PageContainer { padding-top:40px; }
5

Thank you so much - sorted :slightly_smiling_face:

6

Sorry to bother you again, but the padding-top on the mobile is not enough and covers the heading - is there a way to make the padding-top larger for mobile screens?

1 Like
7

Hi @3sixtyoutdoors ,

You can add this addition CSS code to solve the issue with mobile device

@media screen and (max-width: 600px) {
#PageContainer { padding-top: 50px; }
}
8

Hiya

That does not seem to make a difference. This is my code in full:

.header-wrapper {
position: fixed;
z-index: 1;
background-color: rgba({{ settings.color_body_bg }}, 0.0);
width: 100%;
}
//sticky header
.header-wrapper {
position: fixed;
z-index: 1;
background-color: #000({{ settings.color_body_bg }}, 0.0);
width: 100%;
}
.header-sticky .header-wrapper {
background-color: black({{ 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 {
}
#PageContainer { padding-top:50px; }
.tags–collection li {
display: inline-block;
@media screen and (max-width: 600px) {
#PageContainer { padding-top: 200px; }
}

}

Any help appreciated :slightly_smiling_face: