CSS Header Fixed Position

Question

I have a site that horizontally scrolls across five page widths. I want the header to stay fixed in the same position while the pages scroll horizontally. In Safari, the header stays with the css rule, "position:fixed". In Firefox, Chrome and IE, however, the header scrolls with the pages. Is there an easier way than pulling the header out of the wrapper for each page? The code is complicated so I want to avoid pulling it outside.

<div id="page1">
    <div class="header"></div>
</div>
<div id="page2">
    <div class="header"></div>
</div>
<div id="page3">
    <div class="header"></div>
</div>

.header {
    width:100%;
    height:110px;
    background-color: rgba(43, 77, 105, .6);
    z-index: 10;
    position: fixed;
   top:0;
}

Answer 1

You can try adding left:0 property for .header class to fix the issue

Happy Coding :)