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>.