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: 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)
-
- 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?
-
- 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
-
- 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:
It gets header height.
Now you need to modify it and insert fixed value:
Please note 100 values - modify it to suit your needs (in both places).
- 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).
-
- Moderator
5 posts
• Page 1 of 1