Mobile menu background

Hello,

Thanks for your Kind Patience!

Currently, Mobile Transparent Headers are not supported out of the box and also given the structure we are not 100% sure if small customizations will work work with all the Header functionalities. We have tried Customizing this and you can consider using the following CSS Codes:
[ch_pre type="css"]@media (max-width: 991.98px) {
body:not(.primary-menu-open) #header,
body:not(.primary-menu-open) #header-wrap {
background: transparent !important;
border-bottom: 0 !important;
z-index: 499;
}

body:not(.primary-menu-open) #header + .include-header {
	margin-top: -100px;
}

}[/ch_pre]

This appears to be working well for us upon testing. Hope this Helps!

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

Hello,

Thanks for your Kind Patience!

1. As we have mentioned, since this functionality is currently not supported out of the box, the flexibility is a little limited in this with customizations. So the Sticky Header currently can only be one background at the moment. We are working on Transparent Mobile Headers at the moment and will introduce this in Canvas 7. Thanks for your Understanding on this.

2. You can consider using this code:
   [ch_pre type="css"]@media (max-width: 991.98px) {
   #header-wrap {
   background-color: #E2E2E2;
   
   }
   }[/ch_pre]

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.