Make A Good Looking Navigation Menu ( Step by Step Tutorial )

If you are searching on Google for a professional navigation Menu bar which attracts visitors and fit perfectly on your blog theme then you are at right place. Most of the people, who are just new to web designing or not understand enough web designing find difficulty to integrate navigation bar with blog theme.

So the tutorial given below comprises the basic idea to make menu bar so that beginner web designers can make their own menu bar according to their choice. 

Also Read: Why Your Blog Still Makes No Money?

You can choose font, color, background-color, border etc. like property freely. This tutorial uses simple CSS property and HTML tags. Or you can choose the high-quality navigation bar created by our team

  • Horizontal menu bar in Google style
  • Drop down menu in Facebook style
  • Drop down menu for blogger blog
  • Black Drop down menu for blogger blog 

four high-quality navigation menu given above cannot be completely customized by beginner web designer.

Hence if you want to make your own menu bar then move to the tutorial.

Also Read: A Professional Good Looking Horizontal Menu Bar In Google Style

How To Make Navigation Menu Bar:-

We will make navigation menu with the help unordered list <ul>, you can make your blog to look from attractive with the list from here.

The first thing is to create an HTML unordered list <ul> like this

<ul id="navbar">
   <li><a href="#'>Home</a></li>
   <li><a href="#'>About</a></li>
   <li><a href="#'>Service</a></li> 
   <li><a href="#'>Contact</a></li>

It will create following output

Now add some CSS property to give it a look of a professional menu bar.


It will remove all circles which are at starting of the list.

Next thing is to display these list inline by the following code.

#menubar li


Have you seen the result now get ready to make your good looking menu bar for the blog?

Leave a Reply

error: Content is protected !!