Making a Drop-Down Navigation Bar

I have received several comments asking for a tutorial on how to make a drop-down navigation bar like you see on my blog. This will be my last tutorial on this blog!

Now, I have to be honest. I created this tutorial 2-3 years ago and I struggled with it for a long time, trying to get it right. As I went back, I spent a lot of time trying to figure out what I did in the first place and even ran into some of the same errors as I did the first time. For this navigation bar, I used HTML Dog for the main part of the tutorial and various other help forums to figure out some of the rest. While I can give good explanations for most of the tutorial, there are some parts that I don't completely understand. Also, I am not a professional web designer. Some of my modifications are probably not be the best practices for web design. But for a beginner, they get the job done.

If you don't know anything about HTML/CSS, this tutorial may be difficult for you. I have given some explanations and links that should get you through the tutorial, but if you need to make additional modifications, you may have trouble. Creative Bloq has a list of the Top 20 Online Training Resources for anyone interested in learning more about web design. I have used #1 and 10 from that list and recommend those for beginners.

For this tutorial, I created a new navigation bar, similar to the one on my blog. I am using the Blogger Simple template that was customized in my tutorial on How to Make Your Own Custom Blog Template. You can look at the actual navigation bar on my Practice Blog. Here is a preview:

Want the full tutorial? Keep reading!

Navigation Bar - Using Pages

A good blog needs to be easy to navigate. If your readers can't search through your posts quickly and easily to find what interests them, they probably won't be looking at your blog for long. There are so many different ways to make a navigation bar but I am going to explain very basic ones for now. Navigation bars can range from a very basic list of links to complicated drop-down menus. Some blogs even have their navigation bars creatively embedded in their header design.

I can definitely help you make a basic navigation bar, but I still don't know how to make the really creative types of navigation bars. I created my navigation bar a few years ago and I don't remember how I did it well enough to explain it. I do remember that it took me forever to figure out how to do the drop-down menus. I encountered a million glitches and eventually figured it out, even though the spacing in some browsers keeps it from lining up as well as I would like. However, if I have time after I finish this basic nav bar, I will look into my drop-down menu and try to figure out how I put it all together.

So let's get started on a basic navigation bar!