Take a look at the HTML page on this JSFiddle link: http://jsfiddle.net/rb8rs70w/2/
The page features a "sticky" header created using CSS with the property position: absolute.
...
<body class="body-menu-push">
<header role="banner">
<a href="#" class="menu-toggle" id="show-menu">Menu</a>
<h1 class="logo"><a href="/">Site Title</a></h1>
</header>
<nav class="menu" id="main-menu">
<ul>
<!-- menu items here -->
</ul>
</nav>
<article class="content">
<!-- page content here -->
</article>
</body>
...
Below is the CSS code used:
* {
margin: 0;
padding: 0;
}
header[role="banner"] {
height: 70px;
font-size: 20px;
line-height: 70px;
border-bottom: 2px solid #ccc;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
background-color: #fff;
}
.menu-toggle {
display: block;
position: absolute;
left: 20px;
}
.logo {
font-size: 20px;
float: right;
margin-right: 30px;
}
.menu {
width: 200px;
height: 100%;
position: fixed;
top: 0;
left: -200px;
z-index: 1010;
background-color: #eee;
}
.menu.menu-open {
left: 0px;
}
.body-menu-push {
overflow-x: hidden;
position: relative;
left: 0;
}
body.body-menu-open {
left: 200px;
}
.content {
width: 400px;
margin: 120px auto;
}
When clicking the 'Menu' link, a push-menu (#main-menu) slides in from the left (initially hidden), pushing the rest of the page to the right. Clicking the 'Menu' link again hides the push-menu and restores the original page layout.
This functionality works well in Firefox (v31) and IE (v9). However, in Chrome (v36.0.1985.143 m), when the push-menu opens, the 'Menu' link disappears (possibly due to the absolutely positioned header not moving to the right). Interestingly, resizing the Chrome window causes the 'Menu' link to reappear (correctly pushing the header to the right). Despite closing the push-menu afterwards, the sticky header remains displaced to the right.
If you know how to address this issue in Chrome, please share your insights!