Develop(her): Simple Sticky Navigation

How to set up a simple sticky navigation or navbar using CSS.

Put everything that you want to “stick” to the top of the page in div class=navbar or fixed or whatever you want to call it.

.navbar {
height: 80px;
width: 100%;
position: fixed;
top: 0;
left: 0;
background: white;
}

Silly issues you may encounter

The rest of the content on your page may show up in front of your navigation bar. OH NO! This is not pretty. This is not good show.

You can add

z-index:999;

to you navbar css code to fix this. I will research why this works later.

No comments

Leave a Comment

Your email address will not be published. Required fields are marked *