Mask logo? line - svg, cut out


The navbar in my website is transparant in the first section. Though, in this first section, there is a line that “connects” with the logo, but needs to have some standard spacing between them. I was thinking I need to mask the logo or something like that to make it “cut out” the line in the header section.

I have added two screenshots:

  1. You enter the website and the spacing between the logo and the line is allright
  2. You scroll further on the website and the line can be seen through the logo (this is what I want to change)

So the goal is: Make the whole header section have the space you see between the logo and the line when you enter the website as in screenshot 1.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)