Fixed CSS & HTML Navigation Bar Posted on February 15, 2014 by Aleksandar Gichevski (G+)

New trends in website design have come and we need to prepare our new designs. If few years ago we needed to worry how the website looks in different browsers, today we must also consider the mobile and tablets and create responsible designs just with one specific reason - giving the user what he needs using quick menus and links. That's why in this post I will show you how to create top navigation bar that has fixed position and it's scrolling along with content using CSS and HTML.

HTML Document with menu code

We define our menu that will have class "blogNav" and in that element we add our links.

Home
PHP
JavaScript
CSS
WordPress
APIs
.htaccess
Other How-To
Useful Scripts
What I Recommend

CSS Code for navigation bar

Here comes the interesting part. Creating fixed top bar is very easy with CSS, here is the code:

.blogNav{
	font-size:16px;
	width:100%;
	background-color:#999999;
        position:fixed;
        top:0;
        left:0;
}

Ok, but what if I don't like my navigation bar to be on fixed top position, but somewhere in the design and when scrolled below then to become fixed? If that is the case for you too then use below CSS code:

.blogNav{
        font-size:16px;
        width:100%;
        background-color:#999999;
}

.fixedMenu{
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;	
}

Also here is the code for navigation links design:

.blogNav a:link, .blogNav a:visited, .blogNav a:active{
	display:block;
	padding:5px 15px 5px 15px;
	float:left;
	color:#ebebeb;
        text-decoration:none;
}

.blogNav a:hover{
	color:#fff;		
}

The magic of jQuery

If you decided to go with Option 2 and have a navigation bar fixed only on scrolling then add below jQuery code in head section of the html document. If you want to host the jquery library instead link to it, you can download the newest from here.

That's it. Your menu is ready and it will become fixed only on scrolling, if you are back to top the menu will get back to it's original position.

Browser Support

Fixed Navigation Bar created in CSS & HTML is supported by all major browsers including IE7 and higher.

Live Demo

Fixed navigation bar Fixed navigation bar triggered on scrolling

Other Posts You Might Like