How to Make Fixed Navigation Bar in HTML and CSS

How to make Fixed Navigation Bar in HTML and CSS – Create Sticky Fixed top, Right and Left Menu Bar in HTML, CSS easily

User experience is always play a vital rule in site ranking. As we all know google now consider this as a ranking factor. It is very bad, if a user come and can’t easily navigate what he want :( . In this order many of us try to use Absolute Fixed Navigation so user good experience. But many developers think it is difficult task to make fixed navigation, That’s why they use heavy plugin and modules. But now you no need to install such heavy plugins :) . Becasue in this article i will teach you “How to make Fixed Navigation Bar in HTML and CSS” . It is very easy. It did not require so much knowledge about Developing and designing languages. I will make is kinda simple and easy for you.

In this article we will learn how we can easily Create Sticky fixed top, Bottom, Right and left Navigation menu Bar by using HTML and CSS. Keep in mind this is very basic fixed bars. You can make it more attractive and eye touching just by using CSS :) .

For your Convenience i also upload HTML and CSS code for fixed navigation bars. you might also like to read how to create menu in php Dynamically – php navigation.

How to make Top or bottom Fixed Navigation bar :

Before going to share Top fixed bar code i suggest you to first learn some basic about ho to create navigation bar in HTML. for this purpose you can go for How to Create Drop Down Menu in HTML CSS style. If you want to use “UL” and “LI” in CSS, then start from this Code.

CSS code for UL and LI for navigation.

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}

If you use this code then don’t forget to add this style for link properties.

a:link, a:visited {
display:block;
width: 100%;
font-weight: bold;
color: #E6E6E6;
background-color: #19070B;
text-align: center;
padding: 10px;
text-decoration: none;
}
a:hover, a:active {
background-color: #E6E6E6;
text-decoration: underline;
color: #58ACFA;
}

You can Customize the above code properties as you desired :) .

CSS Code for TOP Fixed Navigation Bar.

.top-bar {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 50px;
background-color: #6E6E6E;

above code will fixed your top navigation bar. In order to execute the above CSS code you must need to call it in element tag in which you want to make navigation. For best practice i suggest you to use <nav class=”top-bar”>you navigation goes here :) </nav> this tag element to create navigation. In order to make Bottom fixed bar just make some changes and replace top to bottom :) . you may also like to read How to create Table in HTML – Table Alignment in HTML.

How to make Left or Right Fixed Navigation Bar in HTML CSS :

As we have learn how to make fixed navigation bar in HTML and CSS for top and bottom. Now we will proceed on how we can do same for left or right navigation menus. For this purpose you can also use the above code. You just need to make change the top-bar code to this one.

.right-bar{
position: fixed;
right: 0;
top: 50%;
width: 8em;
margin-top: -2.5em;
}

don’t forget to change its class name while calling the class by element (<nav class=”right-bar”>you navigation goes here :) </nav>). For Left Fixed bar again you just need to replace right with left in CSS :) .

I hope now you have learn how to make fixed navigation bar in HTML. It is not a difficult task, you just need to have some basic knowledge about HTML as well as CSS. If you are good in both then you can easily make a eye touching and attractive sticky floated or fixed menu bar. If you have any problem and question feel free to ask. If you have any good idea to share, Comments will be appriciated :) . you might interested to read Introduction to HTML – What is HTML – Learn HTML.