Home PHP JavaScript CSS WordPress APIs .htaccess Other How-To Useful Scripts What I Recommend
Posted on by Aleksandar Gichevski ()
Like it? Share:

Warning: Missing argument 1 for BaseDD::BaseDD(), called in /home/agicheco/public_html/wp-content/plugins/digg-digg/include/dd-manual.php on line 123 and defined in /home/agicheco/public_html/wp-content/plugins/digg-digg/include/dd-class.php on line 97

Warning: Missing argument 2 for BaseDD::BaseDD(), called in /home/agicheco/public_html/wp-content/plugins/digg-digg/include/dd-manual.php on line 123 and defined in /home/agicheco/public_html/wp-content/plugins/digg-digg/include/dd-class.php on line 97

Warning: Missing argument 3 for BaseDD::BaseDD(), called in /home/agicheco/public_html/wp-content/plugins/digg-digg/include/dd-manual.php on line 123 and defined in /home/agicheco/public_html/wp-content/plugins/digg-digg/include/dd-class.php on line 97

Warning: Missing argument 4 for BaseDD::BaseDD(), called in /home/agicheco/public_html/wp-content/plugins/digg-digg/include/dd-manual.php on line 123 and defined in /home/agicheco/public_html/wp-content/plugins/digg-digg/include/dd-class.php on line 97
 

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.

<div class="blogNav">
<a href="http://agichevski.com/blog">Home</a>
<a href="http://agichevski.com/php">PHP</a>
<a href="http://agichevski.com/javascript">JavaScript</a>
<a href="http://agichevski.com/css">CSS</a>
<a href="http://agichevski.com/wordpress">WordPress</a>
<a href="http://agichevski.com/apis">APIs</a>
<a href="http://agichevski.com/htaccess">.htaccess</a>
<a href="http://agichevski.com/other-how-to">Other How-To</a>
<a href="http://agichevski.com/useful-scripts">Useful Scripts</a>
<a href="http://agichevski.com/what-i-recommend">What I Recommend</a>

<div style="clear:both"></div>
</div>

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.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {  
  var top = $('.blogNav').offset().top - parseFloat($('.blogNav').css('marginTop').replace(/auto/, 0));
  $(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();

    // whether that's below the form
    if (y >= top) {
      // if so, ad the fixed class
      $('.blogNav').addClass('fixedMenu');
    } else {
      // otherwise remove it
      $('.blogNav').removeClass('fixedMenu');
    }
  });
});
</script>

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


Leave a Reply

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

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.