Transparent mobile header in index-fullscreen-video.html

Question

Hi Canvas team!

I would like to make the mobile header - and the dropdown menus after clicking the trigger - transparent in the index-fullscreen-video.html template.
You have covered this for another template in: How To Make The Mobile Header Transparent In Landing-4.Html Template
Can you please instruct me how to do this for the index-fullscreen-video.html template?

Thank you so much!

SemiColonWeb · Accepted Answer

Hello,

The Transparent Header in Mobile Menus is currently not supported due to the fact that the Slider and Header does not work as expected because of the flexible height of the Header when opening the Mobile Menu. You can make just the Header Transparent using the following CSS Code but not the Mobile Menu too:

@media (max-width: 991px) {
	#header { background-color: transparent !important; }

	#header.transparent-header + #slider {
		top: -100px;
		margin-bottom: -100px;
	}
}

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

wilde · Answer

Could you please help me out? I'm waiting for this to launch my website.

wilde · Answer

That is too bad. Alternatively, can I hide the hamburger on mobile and other sizes where the hamburger pops up? Thanks again!

Semicolon Web · Answer

Hello, You can simply add the .d none Class to the primary menu trigger Element. This will definitely work fine. Hope this Helps! Let us know if we can help you with anything else or if you find any further issues.

wilde · Answer

Yes it works. Thanks!