Having navigation overlay content & fixed at top of page

I can set the navigation to sticky, but at the beginning of the site it does NOT already overlay the content, which is what I want.
How can I do that? I already tried some CSS with “padding” and “position:fixed” but this didn’t work.

Hi Mecki,

Can you share your site URL here?


Sorry, it’s currently on a local server.

I did not change the existing setup…it’s only, I wanted to like create a hero video intro using the siteorigin video widget.

Similar to your hero area but with a video, but since you hero area only suports images I disabled it and put a video as first content element.
But the video at top of the page is now BELOW the navigation not BEHIND it.
Only if I scroll slightly it slips behind it.

I believe it has to do with that part “header-clone” (this creates a gap, when the page is not yet scrolled)…is this something necessary? Or can I disable it?


Yes, it was because the header-clone. And you can manage it using these CSS code below:

.home .header-clone {
    position: absolute;
.home .site-header {
    background-color: transparent;

Put the code into: Customize > additional CSS.


I had it “height: 0” because I found this somewhere. Is this ok as well? Just to make sure this does not harm other purposes of this element.

Thank you very much for your help!