Bottom of header and banner image overlap making navigation hard to see.

I am using a Brine template and Squarespace 7.0. My url for my website is www.melanesianwomentoday.org.

On my homepage I am using an "index" page wo it has different sections and I have parallax enabled. I like that effect.

The template has two parts to the header. There is a top part to the header and a bottom part to the header. In the next section I have a banner image. 

What I would like to happen is is to put my logo in the top left, the search bar in the top right, and lastly my primary navigation in the bottom center. However when I do that, the banner image from the section below the header overlaps the bottom part of the header. So my navigation menu has the banner image behind it so you can't see it. I wish there was a setting so the sections don't overlap so there is just the white color from the heading behind my navigation in the bottom of the header. If there is a setting for it, I am unable to find it. 

Any help would be appreciated. Thanks!

Do layout like this?