Canvas Support

Remove Grey Header for Mobile

5 replies·opened Oct 31, 2021
J
JasonJSWOct 31, 2021

Hi guys,
I have another problem for my other website. I love exactly how my header is working - it starts transparent & dark header, then not dark when scrolling down. But for mobile, I notice that the header becomes grey, and no longer sticky.

I tried adding data-mobile-sticky="true", but it didn't work unless I remove some of the other data-stick codes.

How can I make this exactly the same as non-mobile? Transparent and sticky, then non-transparent.

<header id="header" class="full-header transparent-header dark header-size-custom" data-sticky-shrink="false" data-sticky-class="not-dark" data-sticky-offset="full" data-sticky-offset-negative="200" data-mobile-sticky="true">

Thank you,
Jason

S
SemiColonWebSTAFFNov 1, 2021

Hello,

Thanks for reporting this and we acknowledge this behavior on Mobile Devices with Mobile Sticky Headers. Actually, the Sticky Offsets are not responsive which is causing this issue. However, this can be fixed with a small block of code. Simply find the following code in the js/functions.js File inside the windowscroll: function() Function Block:

let headerDefinedOffset = $header.attr('data-sticky-offset');
if( typeof headerDefinedOffset !== 'undefined' ) {
	if( headerDefinedOffset == 'full' ) {
		headerWrapOffset = $window.height();
		let headerOffsetNegative = $header.attr('data-sticky-offset-negative');
		if( typeof headerOffsetNegative !== 'undefined' ) {
			headerWrapOffset = headerWrapOffset - headerOffsetNegative - 1;
		}
	} else {
		headerWrapOffset = Number(headerDefinedOffset);
	}
} else {
	if( headerWrapOffset === 'undefined' ) {
		headerWrapOffset = headerOffset;
	}
}

and add the following lines of code just after the above block:

if( $body.hasClass('device-md') || $body.hasClass('device-sm') || $body.hasClass('device-xs') ) {
	headerWrapOffset = 0;
}

Then simply add the data-responsive-class="not-dark" Attribute to the <header> tag.

This should definitely fix the issue. Hope this Helps!

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

J
JasonJSWNov 2, 2021

Thank you for your response. I tried adding the code in js/functions.js but it didn't change anything.

I noticed that mobile sticky will work if I just remove a few sets of data-responstive-class, like if I delete data-sticky-offset="full" data-sticky-offset-negative="200", it will work but does not work even after adding the JS code.

**Also very important, ** I really don't like how the header turns GREY color on mobile. It's supposed to be transparent but it won't stay transparent for mobile, is this something that can be fixed? If not, where is the line I can find to change the color of the mobile header so that it's not #333 color

Thank you,
Jason

S
SemiColonWebSTAFFNov 3, 2021

Hello,

We have checked out the codes before providing it to you. Clearing the Browser Cache should apply the changes correctly. However, if this still does not work correctly, please provide us with your FTP Details in a Private Reply and we will definitely look at this for you.

Additionally, currently Transparent Headers are not supported on Mobile Devices. We are working on bringing this update in the next release.

Hope this Helps!

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

J
JasonJSWNov 4, 2021

This was resolved thank you!

S
SemiColonWebSTAFFNov 5, 2021

Hello,

Glad the issue was resolved.

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
Remove Grey Header for Mobile · Canvas Template Support