Originally published at: http://www.sitepoint.com/getting-sticky-headers-wordpress-admin-bar-behave/
Putting a site’s logo and main navigation into a sticky header (or a fixed-position header) is a definite trend now. It’s become popular for WordPress themes as well: check out posts like all of these.
In a WordPress site, however, sticky headers run into a problem when the admin bar is visible. Both the admin bar and most sticky headers rely on position: fixed; top: 0;, and are positioned according to the viewport. They end up overlapping. Since the admin bar has a z-index of 99999, it usually covers a good bit of the theme’s sticky header (or if the header wins the z-index war, then it covers the admin bar). Let’s look at how we can use CSS (and Sass) to fix this problem.