Transparent header on mobile coming soon?

1 reply · opened Jul 19, 2018

WwildeJul 19, 2018

Hi,

In another topic you said: Transparent Headers are currently not supported on Mobile Devices due to Design constraints. We will release an Update once a Proper Solution is available for this.

Do you have an indication when this update will come?

In the meantime, can you tell me how I change the color of the mobile header background from grey to black?

Thanks!

SSemicolon WebSTAFFJul 26, 2018

Hello,

Currently, there is no timeframe on the availability of the Update due to the Nature of the Responsive Headers. There will be a notification once there is an Update. Thanks for your Patience.

To change the Background of the Header on Mobile Devices, simply use the following code:

@media (max-width: 991px) {
	.dark #header.sticky-header:not(.transparent-header) #header-wrap:not(.not-dark),
	.dark #header.sticky-header.transparent-header #header-wrap:not(.not-dark),
	.dark #header.transparent-header.floating-header .container,
	.dark #header.transparent-header.floating-header.sticky-header .container,
	#header.dark.sticky-header:not(.transparent-header) #header-wrap:not(.not-dark),
	#header.dark.sticky-header.transparent-header #header-wrap:not(.not-dark),
	#header.dark.transparent-header.floating-header .container,
	#header.dark.transparent-header.floating-header.sticky-header .container,
	.dark .responsive-sticky-header #header-wrap,
	.responsive-sticky-header.dark #header-wrap { background-color: #000; }
}

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard