Create a Responsive, Fixed and Resizing Header

In today’s tutorial, I’m going to show you how to create a Responsive, Fixed and Resizing Header. I got the idea for this tutorial, by reading Nick’s Animated Resizing Header On Scroll tutorial about it. In the tutorial, he uses simple javascript and an other little js script that allows him to add / remove CSS classes from HTML elements. So I though I’ll try to create the same effect using jQuery. My method might not support the older browsers like IE5 or 6, but it requires a bit less code.

[tutorial_details]

So, to get started, we need an HTML structure, something like the following:

<div class="header">
    <div class="container clearfix">
        <h1 id="logo"> LOGO </h1>
        <nav>
            <a href="">Lorem</a>
            <a href="">Ipsum</a>
            <a href="">Dolor</a>
        </nav>
    </div>
</div>

Then we need to apply some CSS. The CSS below is just a basic styling for the header.

.header {
    width: 100%;
    height: 150px;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: #3b8dbd;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    -ms-transition: height 0.3s;
    -o-transition: height 0.3s;
    transition: height 0.3s;
}
.header h1#logo {
    display: inline=block;
    height: 150px;
    float: left;
    margin-left:50px;
    font-family: "Oswald", sans-serif;
    font-size: 60px;
    color: white;
    font-weight: 400;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.header nav {
    display: inline=block;
    float: right;
    margin-right:50px;
}
.header nav a {
    line-height: 150px;
    margin-left: 20px;
    color: #9fdbfc;
    font-weight: 700;
    font-size: 18px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.header nav a:hover {
    color: white;
}
.header.smaller {
    height: 75px;
}
.header.smaller h1#logo {
    width: 150px;
    height: 75px;
    font-size: 30px;
}
.header.smaller nav a {
    line-height: 75px;
}

In the CSS code above, the last 3 blocks, have a new class called “.smaller”. This will make the header smaller when we scroll down. But to apply the “.smaller” class, we need some jquery:

$(function() {
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        if (scroll >= 500) {
            $(".header").addClass('smaller');
        } else {
            $(".header").removeClass("smaller");
        }
    });
});

After you added the above jquery code to your <head> area, and you’ve included the jquery library to your document, then your header should properly resize now when your start to scroll down.

To make this header responsive, we need to apply a few lines of CSS:

@media all and (max-width: 660px) {
    .header h1#logo {
        display: block;
        float: none;
        margin: 0 auto;
        height: 100px;
        line-height:100px;
        text-align: center;
    }
    .header nav {
        display: block;
        float: none;
        height: 50px;
        line-height:50px;
        text-align: center;
        margin: 0 auto;
    }
    .header nav a {
        line-height: 50px;
        margin: 0 10px;
    }
    .header.smaller {
        height: 75px;
    }
    .header.smaller h1#logo {
        height: 40px;
        line-height: 40px;
        font-size: 30px;
    }
    .header.smaller nav {
        height: 35px;
        line-height:35px;
    }
    .header.smaller nav a {
        line-height: 35px;
    }
}

And if you’ve added it to your css file, then if you start to resize your browser, make it smaller, when you reach 660px width, you’ll see that your logo will jump to the middle, and your navigation will go below the logo and will be centered as well.

If you enjoyed this tutorial, consider sharing it with your friends, also don’t forget to subscribe to my newsletter so you won’t missout on any more tutorials like this!

Also, check out Nick’s tutorial here: Animated Resizing Header On Scroll