BROOKLYN THEME: Sticky header with Logo

Jinghao
New Member
1 0 0

Hi Charlie, thanks a lot for your kindly share, its really helpful, but i still got a small question if you could help. i just wondering how to adjust the header height base on your sticky header code above, thanks. 

0 Likes
thePaifercom
Tourist
3 0 0

Perfect! Thank you, Charlie!!!

0 Likes
2od
New Member
3 0 0

Hi all

Thanks for the valuable information.

I have now got my header to stick on all pages.  that is what I was after.

However I am using the AVADA free shipping Bar app and on desktop it gets all weird.  Starts of scrolling perfectly but once you get past the fold it inverts and half blocks the header.  It works perfectly on mobile.

I'm using this code.

.header-wrapper, .header-container {
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 {
}
.main-content {
padding-top: 80px;
}
.shopify-payment-button {
z-index: 0;
}

 

0 Likes
ositahill
New Member
1 0 0

Hi @betterlifestyle ,

Did you ever manage to solve the gap above the header out of interest?

Thanks.

 

0 Likes
Lily_itto
Tourist
3 0 2

Hi Charlie,

I used your code and it works very well on Desktop view (Thanks for that). However, on Mobile View, the header seems to be wider than the actual content page, I would have to zoom out to see the entire header which makes the content smaller. Is there a way to fix this and to make sure the header size remains fixed to the mobile device? 

I have currently deactivated it from my website as I didn't want it to affect the site's performance. 

The codes I used are as below 

.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 {
}
body:not(.template-index) .main-content { 
  padding-top: 190px; 
}

 

Thanks,

Lily

designpassion
New Member
2 0 0

Hi Dallas, thank you so much for the code to make the header sticky. I am wondering if it would be possible to make the announcement bar, which is now also sticky, move up and disappear when scrolling down so to not take up the space, especially on the mobile phone? Thank you so much for your help.

0 Likes
Golden_Pigs
Tourist
6 0 0

Hello, I'm trying to do the same for www.goldenpigs.ro but it doesn't work for me.

Can you please advise? 

 

Kind regards

Cristi 

0 Likes
esther_yu
New Member
1 0 0

thank you 
Also check out <a href="https://romaplay.com">chick here to my web</a>

0 Likes