How To Create a Fixed Navigation Bar


We can use HTML, the power of JQuery and some CSS to make a useful and stylish navbar in 3 easy-to-do steps.

Step 1: Adding Script to head

You can simply copy and paste this jQuery code just before the </head> tag.

<script type="text/javascript">
$(window).on('scroll',function() {
var scrolltop = $(this).scrollTop();
if(scrolltop >= 215) {
else if(scrolltop <= 210) {

This code will be shows the navbar if a visitor scrolls down the page 250px and hide it when he/she scrolls up.

Put the HTML

Copy and paste this code just after the <body> tag.

<div id="fixbar">
<ul id="fixnav">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
<li><a href="#">Menu Item 5</a></li>

Don’t forget to change href links and rename Menu Item X texts.

Add Some Style!

I recommend you to use your own styles. But if you lazy, you can use this styles too.

#fixbar {
background: rgba(102, 102, 102, 0.7);
border-bottom: 2px #CCCCCC;
display: none;
height: 40px;
position: fixed;
top: 0;
width: 100%;
z-index: 99;
#fixnav {
display: block;
margin: 0 auto;
padding: 0 15px;
width: 800px;
#fixnav li a {
-moz-transition: all .2s linear;
-webkit-transition: all .2s linear;
color: #fff;
display: block;
float: left;
font-size: 1.25em;
font-weight: 700;
line-height: 40px;
margin-right: 6px;
padding: 0 8px;
text-decoration: none;
transition: all .2s linear;
#fixnav li a:hover {
background: rgba(0, 0, 0, 0.3);
color: #9ff;

Is It Useful To You?

If your answer is yes, please share this content or leave a comment.

Your English is…

Yay, my English is not good. English is not my native language and I could have grammar mistakes and some misspellings. If you catch one, don’t be shy to warn me.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir