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