Sticky Top Menu Bar with CSS3

In this tutorial, we will create a sticky top menu bar which is built only with CSS position property, without jQuery or any other script. It's simple, easy-to-use, and in just 2 steps. In addition, it uses CSS3 box shadow property to display the top menu bar in a nice look. If you're looking for a top menu bar which appears when you scroll down, please check out our another article: Fixed Position Top Menu Bar with jQuery and CSS3.

How to use it:

1. The CSS

#menu {
	position: fixed;
	height: 60px;
	width: 100%;
	top: 0;
	left: 0;
	border-top: 5px solid #a1cb2f;
	background: #fff;
	-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
	-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
	box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
	z-index: 999999;
}

.w {
	width: 900px;
	margin: 0 auto;
	margin-bottom: 40px;
}

2. Markup

<div id="menu">
   <div class="w">
      ...
   </div>
</div>

3. Done

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.