Header switches from not-dark to dark on mobile at random

1 reply · opened May 6, 2020

AAlinorrMay 6, 2020

Hello.

I have

<header id="header" class="transparent-header dark" data-sticky-class="not-dark" data-responsive-class="not-dark">

in my header code but on mobile it sometimes switches to dark mode at random (most common on cennik.html but can occur on any page) as included in screenshots- same html, after some refreshing.

http://stomfischer.pl/cennik.html

SSemicolon WebSTAFFMay 7, 2020

Hello,

We have just checked this out on a Physical Mobile Device and we confirm this bug. We apologize about the Inconveniences caused. We are working on this issue and meanwhile, please consider updating the stickyMenuClass: function() Function Block in the js/functions.js File with the following code:


stickyMenuClass: function(){
	if( $body.hasClass('device-sm') || $body.hasClass('device-xs') || $body.hasClass('device-md') ){
		return true;
	}
	if( stickyMenuClasses ) { var newClassesArray = stickyMenuClasses.split(/ +/); } else { var newClassesArray = ''; }
	var noOfNewClasses = newClassesArray.length;

	if( noOfNewClasses > 0 ) {
		var i = 0;
		for( i=0; i<noOfNewClasses; i++ ) {
			if( newClassesArray[i] == 'not-dark' ) {
				$header.removeClass('dark');
				$headerWrap.addClass('not-dark');
			} else if( newClassesArray[i] == 'dark' ) {
				$headerWrap.removeClass('not-dark force-not-dark');
				if( !$header.hasClass( newClassesArray[i] ) ) {
					$header.addClass( newClassesArray[i] );
				}
			} else if( !$header.hasClass( newClassesArray[i] ) ) {
				$header.addClass( newClassesArray[i] );
			}
		}
	}
},

This should fix the issue, however, please keep us informed if this doesn't and we will rework on this. Thanks for your Patience.

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