Home PHP JavaScript CSS WordPress APIs .htaccess Other How-To Useful Scripts What I Recommend
Posted on by Aleksandar Gichevski ()
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.

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;
}

html-and-css-navbar1

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.


html-and-css-navbar1

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

Get a fast, free website audit

Enter your URL below to get full in-depth SEO report and tips.

‚Äč

Useful Scripts

Most Popular Posts

Recent Posts

June 14th, 2014
Website Optimization Using Gzip Compression

June 10th, 2014
Google Search AutoComplete API

May 14th, 2014
What is a Tag Cloud and How to Calculate it by Formula

March 27th, 2014
Error writing file /tmp (errcode 28) Solved!

February 15th, 2014
Fixed CSS & HTML Navigation Bar

February 9th, 2014
Benchmark Your Server (CPU, File IO, MySQL) with SysBench

February 8th, 2014
JavaScript Array Basics

January 29th, 2014
JVZoo IPN API in PHP

January 25th, 2014
Payoneer Debit Card for Freelancers to receive money online

January 24th, 2014
How HTML Color Codes are generated?

Read Latest Posts directly on Facebook

Archive

X

Get a fast, free website audit

Enter your URL below to get full in-depth SEO report and tips.