Same mainmenu like in the new Event Template

hi there,

is there a possibility to set the same mainmenu technology like in the new event template?
i mean...is it possible to fade in the mainmenu, when the user scroll down? this feature would be great and will make the university template absolutely perfect!

thanks

sven

It would require some JS coding, but what is more - some css designing changes. Are you ready for that kind of changes?

sure. when it is possible to solve it, it would be great!

First thing to do is to edit file:
templates/gk_university/js/gk.scripts.js
and add at its end:

Code: Select all

jQuery(document).ready(function() {   
   jQuery(window).scroll(function() {
      var currentPosition = jQuery(window).scrollTop();
      var scrollSize = 100;
      if ( currentPosition >= scrollSize &&  !jQuery('#gkHeaderNav').hasClass('active') ) {
         jQuery('#gkHeaderNav').addClass('active');
      } else if ( currentPosition < scrollSize && jQuery('#gkHeaderNav').hasClass('active') ) {
         jQuery('#gkHeaderNav').removeClass('active');
      }
   });
});


What the code does - it checks how much user have scrolled down, and if the scroll pixel value is larger than 100 - it adds additional class to #gkHeaderNav element so we can use it in css.
Modify 100 value to suit your needs after whole setup is finished.

Now you need to add some styling to menu when it is in "active" state.
Please edit: /templates/gk_university/css/override.css and add at its end:

Code: Select all

#gkHeaderNav.active {position: fixed; background: blue; padding: 10px 0;}


This is of course sample background colour - you need to set up one that appeals you. Also top padding is reduced so header is not that much big.
Remember to enable "CSS override" in template settings - advanced section.

hi Cyberek!
I wanted to do the same on my site!!!!
In which file i need to make changes?
---------"First thing to do is to edit file: JS coding"-------------

I have added missing filename to original post:
templates/gk_university/js/gk.scripts.js