Niche Demo Store Navigation bug

Hello,

Thanks for your Kind Patience!

We have been going through this according to your explanations and yes we can confirm that it does happen as you have mentioned but we are not sure if this can be classified as a bug as the functionality is not broken taking into account the Hover and Scroll functionalities are working together here. Yes, we agree that on Hover the Header should be white, but when we scroll while hovering the Header, the Sticky Menu functionality kicks in. So, when the Header scrolls back up, the classes are restored which overrides the hover functionality (if still hovering the Header). Yes, it is a little bit tricky and we must admit that this something which we didn't account for when we were testing the demo. So please allow us to work on this for sometime as this requires us to change the core JS codes for the Sticky Header. Thanks for your Patience!

Additionally, to make the Header Light on Mobile Devices, simply add the data-responsive-class="not-dark" Attribute to the `` tag.

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.

Yes we will send you an Email Notification once we have a proper solution to this issue.

Thanks for your Patience.

Hello,

Thanks for your Kind Patience!

We have found the Solution for this. Please follow the steps:

1. Add the following code inside the removeStickyness: function() Function Block in the js/functions.js File:
   [ch_pre type="js"]$header.trigger( 'cnvs-sticky-header-disabled' );[/ch_pre]

2. Replace the existing changeHeaderColor Function Block in the demo-store.html File with the following:
   [ch_pre type="js"]function changeHeaderColor(){
   if (jQuery(window).width() > 991.98) {
   jQuery( "#header" ).on( 'mouseover', function() {
   if (!$(this).hasClass("sticky-header")) {
   $( this ).addClass( "hover-light" ).removeClass( "dark" );
   SEMICOLON.header.logo();
   }
   $( "#wrapper" ).addClass( "header-overlay" );
   });
   
   jQuery( "#header" ).on( 'mouseout', function() {
   if (!$(this).hasClass("sticky-header")) {
   $( this ).removeClass( "hover-light" ).addClass( "dark" );
   SEMICOLON.header.logo();
   }
   $( "#wrapper" ).removeClass( "header-overlay" );
   });
   
   $('#header').on( 'cnvs-sticky-header-disabled', function() {
   if( $('#header').is(':hover') ) {
   $( this ).addClass( "hover-light" ).removeClass( "dark" );
   SEMICOLON.header.logo();
   $( "#wrapper" ).addClass( "header-overlay" );
   }
   });
   
   }
   };[/ch_pre]

This will 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.