Creating and Compensating For Fixed Height Headers

Josh Pollock - September 27, 2013

In Gethen, my new child theme for _Second Foundation, I created an option for fixing the header to the top of the page. Its pretty easy to do this with a little css “postion:fixed”, but keeping it from clipping the top of the page content is a little trickier. In a static html site you would just add some padding to the content, but with a WordPress header, the height is dynamic.

The height of the background image, and the length of the title and tagline can all effect the height of the header. I was able to adjust for this with a short bit of jQuery. All it does is shift #primary, which encompasses all of the site content down by an amount equal to the height of the header.

The other little fix I did was to ensure that the WordPress admin bar doesn’t cover any of the header. To do this I added a little margin to the header that is only applied for logged in users.

Here is a simple function you can use to accomplish something similar:

function slug_header-Stick($options) {
echo "<style> #header-wrap(position:fixed;}";
if (is_user_logged_in() ) {
echo "#header-wrap{ margin-top:19px; z-index:100; } </style>";
}
echo "</style>"
echo "
<script>
jQuery(document).ready(function($) {
$('#primary').css('padding-top', $('#header-wrap').height() + 'px');
}); //end no conflict wrapper
</script>
";
view raw wp_fixed_header.php hosted with ❤ by GitHub