How to Make a Fixed Header Align and Play Nice With the Page

Do you have a fixed header area on your website that is not playing nice with the rest of the page? You can’t quite get the bottom of the fixed header to line up with top of the page content?

Maybe you tried manually adjusting the margin at the top of the content, but when the header height changes at different screen resolutions, what to do?

Well, there’s an easy fix that makes the margin completely dynamic and it uses jQuery. Use this jQuery in your theme…

Add This jQuery Code

$(window).resize(function() {
    if($(".header").height() < 200) { // avoid a glitch when the mobile menu flashes
        $(document.body).css("margin-top", $(".header").height());
    }
}).resize();

It runs when the window is loaded and resizes. It automatically takes the height of your header area (in my case it is the $(‘.header’)) and uses that to apply a margin-top to the body which pushes down everything that is not position: fixed .