Thank you for the prompt reply Kharis.
Changing “.mobile-header” to “.bhfb-mobile” and using the “fixed” position instead of “sticky” has actually referenced the proper element and made it stick. The header wasn’t sized correctly, and would disappear on scrolling up, so I’ve modified your code as follows:
@media only screen and (max-width: 1024px) {
body.sticky-header-active.botiga-scrolling-down .bhfb-mobile {
position: fixed !important;
width: 100%;
z-index: 100;
top: 0;
}
}
@media only screen and (max-width: 1024px) {
body.sticky-header-active.botiga-scrolling-up .bhfb-mobile {
position: fixed !important;
width: 100%;
z-index: 100;
top: 0;
}
}
That solves the mobile device sticky header issue.
What CSS code is required to make the mobile header inherit the same transparency as the desktop header before scrolling?
