Making header smaller

Just like in this post: I wish to make the header small on my site. For instance when you scroll down and the header follows and gets smaller, that is the size I would like it constantly.

I used the custom css code included in the end of the post, but what I get is whitespace under the header, which is the size it would have been originally. How can I resolve this?

Website: http://www.bntonderwijs.nl