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> | |
"; |