view raw
Joel B Joel B - 11 months ago 61
CSS Question

Why is my header overlapping my navbar?

I'm building a basic blog and my header keeps extending up behind my navbar. The navbar has a fixed position and a z-index that is higher than the header. I can't figure out why the top of the header/banner image is extending behind the navbar. I am including a picture of the issue highlighted in FF dev tools and you can see my site directly here if you'd like. Any help/input greatly appreciated.

enter image description here


Edit: as shiva said fixed doesnt take any space, so just add some more margin.

header {
    margin: 89px 0 0;  // update margin

And update your media screen

@media only screen and (max-width: 500px){
header {
margin: 80px 0 0;