Menu appears too late when scrolling

Creative, responsive and unique Joomla template to create personal portfolio website with amazing animations and clean design.
Rate this topic: Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.1.00 out of 6 based on 1 vote(s)
GK User
Wed Sep 09, 2015 2:53 pm
Reply with quote
Report this post
Hi, where could I change the menu to appear a bit earlier when scrolling down. Currently I have to scroll almost down to half the page for the menu to appear. (I don't want it too be visible from the start)
User avatar
Expert Boarder

GK User
Thu Sep 10, 2015 7:10 am
Reply with quote
Report this post
Could you please post an url to your site?
User avatar
Moderator

GK User
Thu Sep 10, 2015 8:22 am
Reply with quote
Report this post
This is not a tricky thing, the menu is standard which is not a problem, I just need the menu to appear as soon as you scroll past the logo. http://goo.gl/GjVdRm
User avatar
Expert Boarder

GK User
Mon Sep 14, 2015 7:41 am
Reply with quote
Report this post
???
User avatar
Expert Boarder

GK User
Mon Sep 14, 2015 8:36 am
Reply with quote
Report this post
By default menu shows when you scroll under the header. It is done by this script in gk.scripts.js:
Code: Select all
   if(jQuery('#gkTop').length > 0 && !jQuery('#gkTop').hasClass('active')) {
      jQuery(window).scroll(function() {
         var currentPosition = jQuery(window).scrollTop();
         if(currentPosition >= jQuery('#gkHeader').height() && !jQuery('#gkTop').hasClass('active')) {
            jQuery('#gkTop').addClass('active');
         } else if(currentPosition < jQuery('#gkHeader').height() && jQuery('#gkTop').hasClass('active')) {
            jQuery('#gkTop').removeClass('active');
         }
      });
   }

It gets header height.
Now you need to modify it and insert fixed value:
Code: Select all
   if(jQuery('#gkTop').length > 0 && !jQuery('#gkTop').hasClass('active')) {
      jQuery(window).scroll(function() {
         var currentPosition = jQuery(window).scrollTop();
         if(currentPosition >= 100 && !jQuery('#gkTop').hasClass('active')) {
            jQuery('#gkTop').addClass('active');
         } else if(currentPosition < 100 && jQuery('#gkTop').hasClass('active')) {
            jQuery('#gkTop').removeClass('active');
         }
      });
   }

Please note 100 values - modify it to suit your needs (in both places).
User avatar
Moderator


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.