I’d just like to chime in here. The reason why the negative margin was used was because the original poster, Gerry, wanted to achieve the same design as this site. As you can see, it uses a Content Slider on the page whose background blends to the header.
If you wanted to make the header and/or nav menu background transparent, you can set them under the Theme Customizer > Header > Header Background and Nav Background respectively. I have to admit, the snippet I provided was created on a whim. I’m gonna edit it so it reflects the options in the theme customizer. Thanks for pointing that out!
This post has taken one or two twists and turns, I’d be interested to see what you ended up with both in customiser settings and code css as well as the front end result. Have the new options in customiser made any difference to this?
Sure. The settings in the Theme Customizer now supports transparent background. When you go to Header > Header Style > Header Background Color, on the color picker, just delete the hex value and leave it blank then click out of it. It will make the background transparent. Same goes for the Nav Menu on a Nav Centered / Nav Bottom layout. All other custom CSS like the position, z-index, and negative margin-top are still needed though.
