How to Make Simple Beautiful HTML Navigation Bar


A website may consist of many beautiful style objects. Generally a website has sidebars, a header image, a footer, headings, subheadings & Navigational menu etc. All building elements have their own importance. Actually, they are all combined to provide a beautiful look for our website. Good designing of individual item may enhance the design of your website. Before doing something advance, We must have to seek knowledge of building something from its basic level, So, in this tutorial I am going to teach you how to make beautiful Simple HTML navigation bar (Menu) for our website. You can amend code for your need and making it more advance.

Step-1- Create File Menu.html

Create a file named menu.html with the help of any html editor like Adobe Dreamweaver. And put following code in the file after body Tag.


Html code for menu bar is completed. Now it is time to do some CSS. You can create it in two ways. One way is to write CSS code in separate style sheet file. And then include it in the menu.html file and the other is, you can write style code in menu.html file in “Style” tag between the head tag. Here in this example of HTML Navigation Bar we will use the second option. So here is the CSS code for HTML Navigation Bar.


Complete code for of menu. Html with css code to create HTML Navigation Bar is given below:

You can watch live demo of this example here.

HTML Navigation Bar Demo

Spread the love

Leave a Reply

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