I like sticky navbars. I think they work. And they’re an elegant solution to ensuring the user always has a way to hit other pages on your site. Turns out, sticky navbars can be pretty easily coded through CSS, which is great because that means it’s not too convoluted.
I found a pretty nifty tutorial at a site that goes by the name of “AvexDesigns“. And hey, what do you know, he has a sticky navbar! A pretty nice one at that…
The tutorial he has up makes creating a sticky navbar sound pretty darn simple. Essentially you tag a navbar with an ID and give it a couple attributes while making sure your header ID has the appropriate attribute.
Are you ready for it?
And that’s it! Pretty easy, right?
Looking at the code on Avex Designs shows that he follows his own tips…mostly. It’s odd, but he put the z-index: 10 bit under the header ID instead of his nav ID. Going into Google Chrome’s “Inspect Element” and disabling the z-index shows that it’s working as intended though, since items will scroll on top of the navbar with it disabled.
The navbar is tagged with the “fix position” attribute though, which, when disabled, does make it not-sticky. So that’s nice to know. I think the reason this designer put the z-index attribute under header instead of nav is that he has some other stuff up there at the top that he wants to keep above everything else as well (like the Avex image).