Fixed menu

Is there similar solution as this?

https://www.gavick.com/forums/simplicit ... nu#p242438

Could you please post an url to your site?

It's still on localhost.

However, it's "Hotel Villa Bellucci" template, and it should be in "gk.menu.js" file

File is in attachment...

If you throw this code out from gk.scripts.js:

Code: Select all

    // Fixed menu
    if(jQuery('#gkHeaderNav').attr('data-fixed') === '1') {
       var page_nav = jQuery('#gkHeaderNav');
       var prev_scroll_value = 0;
       var logo_img = jQuery('#gkLogo').find('img').first();
       var image_logo_exists = jQuery('#gkLogo').find('img').length;
       var dark_logo_img = logo_img.attr('data-dark');
       var light_logo_img = logo_img.attr('data-light');
       var dark_bg_class = jQuery(document.body).hasClass('dark-bg');
          
      function menu_scroll() {
         var new_scroll_value = jQuery(window).scrollTop() >= 0 ? jQuery(window).scrollTop() : 0;   
         var local_diff = new_scroll_value - prev_scroll_value;
         var current = parseInt(page_nav.css('top'));
         var h = 210;
         
         if(new_scroll_value >= h) {
            if(
               !page_nav.hasClass('gk-fixed-nav')
            ) {
               page_nav.addClass('gk-fixed-nav');
               page_nav.css('top', '-250px');
               current = -250;
               
               // Logo switching
               if(image_logo_exists && dark_logo_img) {
                  logo_img.attr('src', dark_logo_img);
               }
            }
         
            if(new_scroll_value >= prev_scroll_value) {
               page_nav.css('top', (current - local_diff >= -250 ? current - local_diff : -250) + "px");
            } else {
               page_nav.css('top', (current - local_diff <= 0 ? current - local_diff : 0) + "px");
            }
         } else {
            if(page_nav.hasClass('gk-fixed-nav')) {
               page_nav.removeClass('gk-fixed-nav');
               page_nav.css('top', 0);
               
               // Logo switching
               if(image_logo_exists) {
                  if(dark_logo_img && dark_bg_class) {
                     logo_img.attr('src', dark_logo_img);
                  } else {
                     logo_img.attr('src', light_logo_img);
                  }
               }
            }
         }
         
         prev_scroll_value = new_scroll_value;
      }
      
      jQuery(window).scroll(menu_scroll);
    }


Then you can use override.css to "fix" the menu.

Perfect !
TNX

If anyone else need this as well, .js file and .css style are in attachment...

Thanks for sharing.
If you have any additional questions regarding this topic, please let me know.

Kindly suggest what to delete from gk.scripts.js to achieve fixed menu as the below mentioned code as suggested earlier is not found in gk.scripts.js ???

// Fixed menu
if(jQuery('#gkHeaderNav').attr('data-fixed') === '1') {
var page_nav = jQuery('#gkHeaderNav');
var prev_scroll_value = 0;
var logo_img = jQuery('#gkLogo').find('img').first();
var image_logo_exists = jQuery('#gkLogo').find('img').length;
var dark_logo_img = logo_img.attr('data-dark');
var light_logo_img = logo_img.attr('data-light');
var dark_bg_class = jQuery(document.body).hasClass('dark-bg');

function menu_scroll() {
var new_scroll_value = jQuery(window).scrollTop() >= 0 ? jQuery(window).scrollTop() : 0;
var local_diff = new_scroll_value - prev_scroll_value;
var current = parseInt(page_nav.css('top'));
var h = 210;

if(new_scroll_value >= h) {
if(
!page_nav.hasClass('gk-fixed-nav')
) {
page_nav.addClass('gk-fixed-nav');
page_nav.css('top', '-250px');
current = -250;

// Logo switching
if(image_logo_exists && dark_logo_img) {
logo_img.attr('src', dark_logo_img);
}
}

if(new_scroll_value >= prev_scroll_value) {
page_nav.css('top', (current - local_diff >= -250 ? current - local_diff : -250) + "px");
} else {
page_nav.css('top', (current - local_diff <= 0 ? current - local_diff : 0) + "px");
}
} else {
if(page_nav.hasClass('gk-fixed-nav')) {
page_nav.removeClass('gk-fixed-nav');
page_nav.css('top', 0);

// Logo switching
if(image_logo_exists) {
if(dark_logo_img && dark_bg_class) {
logo_img.attr('src', dark_logo_img);
} else {
logo_img.attr('src', light_logo_img);
}
}
}
}

prev_scroll_value = new_scroll_value;
}

jQuery(window).scroll(menu_scroll);
}

Could you please post an url to your site?

Site URL
http://184.154.22.43/~pharmaanivik
Please help us to get the fixed menu

@amarjit - your header is already sticky and doesn't hide.