CSS Technique: Sticky Nav

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…

Screen Shot 2013-12-09 at 3.34.40 PM

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?

#navigation {
position: fixed;
z-index: 10;
}

#header {
margin-top: 50px;
}

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.

Screen Shot 2013-12-09 at 3.42.15 PM

 

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).

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s