Hi @gorfeas,
Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.
@media only screen and (max-width: 991px) {
.home #masthead-mobile {
position: absolute;
top: 0;
width: 100%;
background-color: transparent;
}
.home .content-wrapper {
padding-top: 0;
}
}
Just tried it and it seems to work.
However there is still one thing missing to make this work: I need to enable full width and full height in mobile view for the dark background image / video to ocupy the whole screen and make the header visible.
Any suggestions on the css needed to get rid of the margins/padding on full width blocks?
What I am trying to achieve is to have exactly the same behaviour for the mobile menu as for the desktop:
Transparent header with a full width background block and a sticky NON-transparent header on scroll.
Hi @gorfeas,
Thank you for getting back.
Upon checking with the current state of your site appearing in mobile screen, you would need to add this custom CSS code:
@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;
}
}
Please give it a try and let me know your views.
Thanks!
Added the above code, plus a 20px botom padding, final code looks like this and is inserted as a code snippet sitewide via the wp/code plugin.
@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;
}
}
I am very happy with the result. Thank you very much for your fast response. I will mark this as resolved
One more thing, how do I force the above mobile header to follow the same display conditions I managed to apply for the desktop transparent header via the customization menu?
When I activate header/footer builder, this code no longer works. What changes should be made to make it work again?
have a look at my development website: https://wp.emthrace.org
thank you
