It works now on desktop, but it still doesn’t work on mobile.
I also added:
.sticky-header-active .mobile-header {
position: sticky;
top: 0;
}
What did I miss?
Hi @adrianlmt,
Your mobile menu might have different CSS selector.
If so, try this CSS code:
.sticky-header-active .bhfb-mobile {
position: sticky;
top: 0;
z-index: 9;
}
Thanks for the reply, that was the problem.
Now everything works ok!
One more question, can only ‘Bottom header row’ be displayed on mobile? Thank you for your help
One more question, can only ‘Bottom header row’ be displayed on mobile? Thank you for your help
Try adding this CSS code:
.bhfb-mobile .bhfb-below_header_row.bt-d-none {
display: block !important;
}
Unfortunately it doesn’t work…
This is the site: https://lmtcollection.ro
-
This reply was modified 3 years, 3 months ago by
adrianlmt.
It seems that it doesn’t work to display only the ‘Bottom header row’, but I reduced the size of the logo, and it looks better now.
I’m still looking for a solution.
Trying to do the same thing (transparent and sticky header) for a development site:
https://wp.emthrace.org/
I tried this css (from another post here) but it doesn’t work when I activate header/footer builder. I tried the above class .bhfb-mobile but it still doesn’t work. Could you please help with the css syntax? thank you
@media only screen and (max-width: 991px) {
#masthead-mobile {
position: absolute;
top: 0;
width: 100%;
background-color: transparent;
}
.content-wrapper {
padding-top: 0;
margin-top: 0;
}
}
@media only screen and (max-width: 991px) {
#masthead-mobile > div {
position: sticky;
top: 0;
}
.sticky-header-active #masthead-mobile > div {
position: fixed;
background-color: #878371;
padding-bottom: 20px;
}
}
Same problem here: https://wp.emthrace.org/
I tried the above solution but it still doesn’t work. Any suggestions?
