How to shrink the header while scrolling down the page?

how to get this effect ?

You mean like on the GetGrav homepage?

exactly !

It's exactly the same as the header in Antimatter theme. You can see it in action here:

onepage skeleton demo

Basically it's just CSS and JavaScript. There's a JS function in antimatter.js called scrollHeader() and that just toggles a CSS class on the header element as you scroll past a certain point. Then the rest is just CSS to set the sizes and enable animations. You can find that in the scss/template/_header.scss file.

okay thanks :D

wow, this skeleton demo is great. love you guys !

In case you missed it, we have several skeletons with various themes, content, plugins and setups.

Grav Skeleton Packages

These are a great way to get quickly setup with a site to start developing on.