Getting Sticky Headers and the WordPress Admin Bar to Behave

Originally published at:

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 this article on SitePoint

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.