niharika Singhal niharika Singhal - 4 months ago 13
HTML Question

Fixing Header using CSS

I am trying the fix the header on the top for my website, but while I am using position:fixed; the header is shifting to the left and rest of the content of the page is coming up. I have tried z-index and padding still header is to the left, can anyone please help in finding the solution.

Thanks

<body>
<div class="header_area ">
<div class=" header ">
<div class="logo floatleft">
<img src="images/2016.png" alt="logo" width='100%' align="middle" style="border:5px solid white"/>
</div>
<div class="mainmenu floatright ">
<nav class="main-navigation pull-right hidden-xs hidden-sm">
(now some list there)





.header_area{}
.header
{
position: fixed;
z-index:1000;
padding: 10px 0;
margin: 0 auto;
transition: all 1.3s ease 0s;
-moz-transition: all 1.3s ease 0s;
-webkit-transition: all 1.3s ease 0s;
-o-transition: all 1.3s ease 0s;
-ms-transition: all 1.3s ease 0s;

}
body{
padding: 20px 10px;
font-family: sans-serif, open-sans;
font-size:14px;line-height:20px;color:#414141;
}
nav.main-navigation {
position: relative;
z-index: 9999;
font-family: bebasregular;
}

Answer

try to add:

position: fixed;
top:0; left:0; right:0;
Comments