Sticky header overlaps content (mobile is fine)

My sticky and transparant header is overlapping content. (https://www.roekconsultancy.nl) Mobile is fine. You can see that about 20% of the header is overlapping the hero image:

However if I resize the browser window (large->small->large) all is fine:

That is untill I start scrolling or browsing within the website. Then the header will be overlappling the content again. All pages within the website share the same layout and experience the same issue. It is driving me crazy since I solved all other newby challenges. I would be so happy if you could help me to fix this remaining issue. :slight_smile:

Regards, Arjen

Hello Arjen,

Try enabling static menu style, which the option is in Dashboard > Appearance > Customize > Header area > Menu style.

09

Regards,
Kharis

Hi Kharis,

Thank you for your response. A static menu works fine but that is not a solution for my problem. I need to have a sticky menu. So how can I force the header to respect the content? (in this case siteorigin hero widget)

To me it is strange that if I resize the browser window all is like it should. Isn’t there any css that could help?

Regards,
Arjen