niharika Singhal niharika Singhal - 1 year ago 90
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.


<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 class="mainmenu floatright ">
<nav class="main-navigation pull-right hidden-xs hidden-sm">
(now some list there)

position: fixed;
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;

padding: 20px 10px;
font-family: sans-serif, open-sans;
nav.main-navigation {
position: relative;
z-index: 9999;
font-family: bebasregular;

Answer Source

try to add:

position: fixed;
top:0; left:0; right:0;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download