Monday, March 16, 2015

Getting Sticky Headers and the WordPress Admin Bar to 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.


Continue reading %Getting Sticky Headers and the WordPress Admin Bar to Behave%




by James Steinbach via SitePoint

No comments:

Post a Comment