Fixed header with logo and menu

Before I started working with www.remarpro.com I used WordPress.com. There, I had a theme where the header when scrolling down moved until it reached the top of the page and then got fixed.

I’m trying to find a code doing this, I have:

. site-header {
position: fixed;
}

But then the content moves up over the header. I also still don’t know how to let the header scroll first until it reaches the top of the page.

Can anyone help me with this?

I’m using twenty sixteen and the URL is https://www.boutiquemaisonamsterdam.com