Search code examples
htmlheaderz-indexcss-position

fixed header displayed over content, but there is a gap at the top,

so I have fixed and centered the header, and the z-index achieves it being over the top of content that scrolls, however there is a small gap at the top.

I tried using overflow:auto but it did not work as I had hoped. 

<body>
<div class="wrapper">
<header class="site-header delay fadeInDown animated">
    <a class="header-link fadeInDown animated" href="/">
    <h1>BryanBell</h1>
    </a>
</header>

CSS

h1 {
font-family:"CubanoRegular";
font-size:72px;
letter-spacing:12pt;
line-height:120%;
text-align:center;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
margin:50px;
padding:25px;

}

header {
position:fixed;
text-align:center;
margin:0;
padding:0;
width:100%; 
height:150px;
z-index:999;
background-image: url('http://subtlepatterns.com/patterns/cartographer.png')
Solution

  • Add this to your CSS:

    html{
    margin-top:0;
    padding-top:0;
}
body{
    margin-top:0;
    padding-top:0;
}