Lindsey asks:
I found this post on your site (https://halfelf.org/2013/genesis-static-nav-bar/) and had a follow up question about it. My nav bar is now static and fixed to the top of my site, but for some reason a couple of things go over the top of it when I scroll, namely two AdSense ads and a related posts plugin’s images at the end of posts on single post pages. I would love any advice you may have on fixing this. I’m sure it must be something simple, but I can’t figure it out. Thanks!
It’s the z-index. If you’ve used Photoshop, you know about layers. Well, z-index is similar for webpages. It defines the ‘stack’ order, or what’s ‘on top’ of everything else.
Logically you want a video ‘on top’ of the CSS etc of the page, so most of the time this isn’t a problem. At the same time when we’re using CSS to position a menu, it gets … weird.
The basic idea of z-index is that any element with greater stack order is always on top of an element with a lower stack order.
Here’s the CSS I used for my floating menu:
.nav-primary {
position:fixed;
z-index:99;
top: 0;
width: 100%
}
The z-index on the WP toolbar (that black bar on the top of your site) is z-index: 99999; so you can change your CSS from 99 to 99998 and that should take care of it. We do want that toolbar to always win, after all.
