Transparent Mobile header

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