We get this question more often. One reason is that people always associate a header with an image. You have to get away from the idea that an area must always have content. Sometimes it's even better to use empty and completely transparent headers. The new design "Polydeuces" was built specifically to show you what three headers can be used for and it looks really good to boot.
This is how the design is built
We use structure 3 or 4 for this design. If you don't need a sidebar, take 4 otherwise 3. You can change at any time. This structure allows for so-called stripes, areas that are below the normal areas and are displayed left and right across the entire browser.
Since we wanted the navigation to float freely above the background and have spacing to the top, we turned on header area 1 and made it completely transparent (no image, no background color, no line, no effect). With the height of the header we determine the spacing that the navigation has to the top.
It is important that the strip next to the header is also made completely transparent, i.e. invisible.
Then we placed the navigation under the header area 1. We made the navigation area transparent as well and for that we added a slightly transparent color, lines and a shadow to the strip below the navigation. You can specify a spacing to the bottom of the navigation area. Unfortunately, this causes the line at the bottom and the shadow to be moved down as well.
Therefore, we simply turned on the second header area and made it transparent as well. Likewise, of course, the strip next to the header area 2. We adjusted the height according to our wishes. A thin line under the header 2 completes the whole.
The content we have highlighted with white and made slightly transparent. We also added a shadow to give the impression that the content area is "punched in". The striped area next to the content we have also backed with white but made more transparent. The problem now is that the content is directly adjacent to header area 2. We can adjust the spacing down at header area 2 and the content will "slide" lower. However, this spacing is completely transparent and cannot be designed. However, we wanted the impression that the outer area also works upwards in addition to the content. So we turned on the third header area and made the header itself transparent and set the stripe outside the same as the stripe next to the content. Perfect. What you can't see in the screenshot. In the footer area we also used multiple footers to create such an effect downwards as well.
In the picture above the three headers are marked. I hope the small explanation helps you to implement interesting effects yourself. Have fun with it.