Sticky header not working on mobile

Hi @sestnact,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

@media only screen and (max-width: 1024px) {
  .sticky-header-active header.bhfb-mobile {
    position: fixed !important;
    width: 100%;
    z-index: 2;
  }
}

it’s work but there is a glitch when scrolling down

Add:
top: 0;
And change z-index to 100 because the zoom icon has z-index of 99:
like this:

@media only screen and (max-width: 1024px) {
  .sticky-header-active header.bhfb-mobile {
    position: fixed !important;
    width: 100%;
    z-index: 100;
    top: 0;
  }
}

• This reply was modified 2 years ago by derdon.
• This reply was modified 2 years ago by derdon.
• This reply was modified 2 years ago by derdon.

Hi @sestnact,

Have you tried this CSS code?

@media only screen and (max-width: 1024px) {
  .sticky-header-active header.bhfb-mobile {
    position: -webkit-sticky !important;
    position: sticky !important;
    width: 100%;
    z-index: 2;
  }
}