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

Laptop with Code

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 .

Enjoy!

Let me know in the comments below if you have any questions or need help with anything.  Thanks!

Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments