Sticky header

The template comes with sticky header functionality, that makes pages navigation together with the menu much more convenient. Sticky header is available in 4 animation variations - Slide, Swing, Flip, Bounce. You can choose one you like most. For this find the following code in js/main.js file: 

 

CRUMINA.fixedHeader = function () {

 

   // grab an element   $header.headroom(      {         "offset": 10,         "tolerance": 5,         "classes": {            "initial": "animated",            "pinned": "slideDown",            "unpinned": "slideUp"         }      }   );};
... and replace the default animation effect with the following:
 
for Slide -  "pinned": "slideDown",
"unpinned": "slideUp"
 
for Swing - "pinned": "swingInX",
"unpinned": "swingOutX"
 
for Flip -  "pinned": "flipInX",
"unpinned": "flipOutX"
 
for Bounce - "pinned": "bounceInDown",
"unpinned": "bounceOutUp"
 
A detailed documentation on sticky header can be found by the following links:

http://wicky.nillia.ms/headroom.js/

 

https://github.com/WickyNilliams/headroom.js

In order to deactivate sticky header function, you just need to delete the line   id="site-header" from HTML markup, namely from:

 

<header class="header" id="site-header">...</header>

 

To bring it to this look:

 

<header class="header">...</header>.