Responsive Sticky Header with CSS

Sometimes you’ll want the header to stick at the top of the browser window so the main menu is only a move of the mouse away. Here’s a quick solution that stops the header being sticky at a set width to avoid any issues on smaller devices where screen space is at a premium.

All we’re doing is setting a min-width (not the usual max-width) to say “if the browser is large than this amount, apply this styling”. The padding-top:140px; on the body is just to account for the height of the sticky header.

.site-header {
width:100%;
padding:30px 0px;
}
@media screen and (min-width: 1000px) {
body {
padding-top:140px;
}
.site-header {
position:fixed;
top:0px;
left:0px;
}
}
<div class="site-header">
<h1>Sticky Header!</h1>
</div>

Follow IP on Twitter Like IP on Facebook

Advertisement