transparent static menu

Hello wonderful human beings!

I’m creating a static header for my website, and through out the design I use reduced opacity. I want to use this on my static header as well. However, while scrolling down my content is visible under the static header(what a shocker). This might be a very easy fix, but I tried everything I can think of.. super annoying.

How can I “bump” the “top” of my site further down? Usually static headers has no transparency, so it doesn’t really matter, but in this case it really does. Anyone have a solution to my problem?

Put differently.

static header is transparent, and the other content is visible through the static header while scrolling. How can I fix this?

A “margin-top” on the second wrapper will push down the content, but not after a few cm of scrolling down..

Please help 🙂