The Redhead Riter

Witty, Intelligent & Addictive

How To Make A Blogger Drop Down Menu – Navigation Bar

By 64 Comments

Updated 7-11-2012 for the new blogger templates

How did you make that drop down menu – navigation bar?!

There are so many directions of how to do this task, but often they are either WRONG, too complicated or can not be adapted to a Blogger blog. So today the blogging tip is How To Make A Blogger Drop Down Menu – Navigation Bar.

It’s complicated.

I don’t say that to be a downer, but I want you to know ahead of time. Those people that found creating a button/badge for your blog or creating a favicon to be almost impossible will find creating a drop down menu – navigation bar to be completely impossible.

There is a solution and hope for the non-HTML person, so don’t run away yet.
 

Why Have A Drop Down Menu – Navigation Bar?

Blogs have a lot of stuff on them. By stuff I mean advertisements, buttons, words, photos, links, scroll boxes, and colors. Sometimes things become a mishmash of mess (say that 5 times real fast) if the blogger doesn’t make an effort to remain organized.

The first line of defense is columns. There is the main “post” column and then from one to eight more columns that hold the “other” stuff that bloggers love to have at their fingertips.

When I started blogging, I had everything on my blog. Yes, everything including a music player, video player and generators of every kind. It didn’t take long before I started to realize that my blog was hard to navigate. By the time I got a quarter of the way down the page, I was tired!

I still have a lot of stuff which is going to change soon, but at least there aren’t five columns any more with flashing things that give me headaches. Learning is a process, so I’m happy to be moving right along now.

Anyway, after the column solution, the next greatest organizational method is the menu – navigation bar. Instead of having everything mentioned in the sidebars, topics can be summed up at the top of the blog in a neat horizontal row. Not only does it keep the blog neater, but it also allows for easier navigation for your readers.

 

What Will The Drop Down Menu – Navigation Bar Look Like On My Blog?

Let’s first take a look at the sample menu – navigation bar. When you hover over a section of the menu, a drop down will appear as shown in the example below.


Let’s take a look at a few real life examples. The first sample doesn’t have a matching menu – navigation bar while the second sample matches great (Sample1 and Sample2) Go on and check them both out. I’ll wait for you.

Did you notice that the hover can be different for the main bar and the drop down sections?

Did you also notice that the words don’t have to be the same color in the main bar and the drop down sections?

Your imagination is the only limitation.

You can have textured and patterned menu bars as well.




Pretty cool, huh?

How To Make A Blogger Drop Down Menu – Navigation Bar


I’m going to totally hold your hand through the process and give you plenty of visuals.

Like I mentioned before, creating a drop down menu – navigation bar is not for the frightened-to-death-of-HTML blogger. If that is you, just keep reading the directions because I do have a solution for you too if you want to add this feature to your blog.

Make sure you have time to begin and end the task without interruptions. Take your time following the directions and remember that as long as you don’t SAVE the work before you are sure it is correct, there is nothing to worry about.  

  • In the top right hand corner, click DESIGN



 

  • Click the DESIGN tab



 

  • Click the EDIT HTML tab



 

  • Save your template by clicking DOWNLOAD FULL TEMPLATE


 

  • After the template is saved, Put a check mark in the box next to EXPAND WIDGET TEMPLATES


 
Updated 7-11-2012

  • (OLD BLOGGER) After the “header section” of your blog template, you will paste the following code. If you already have “navigation menu” then you will need to paste over it.
  • (NEW BLOGGER) After the “descriptionwrapper” of your blog template, you will paste the following code. If you already have “navigation menu” then you will need to paste over it.

/* Navigation Menu
——————————————————*/
#NavbarMenu {

width: 100%;
height: 35px;
background:#cdaa7d url(https://3.bp.blogspot.com/_zO7E0wkpor4/TUzT8qbOyvI/AAAAAAAACds/ASv7BABxWzY/s1600/white%2Bto%2Bblack.png) repeat-x top;
color: #cdaa7d
margin: 0 auto 0;
padding: 0;
font: normal 12px Arial, Tahoma, Verdana;
border-top: 1px solid #855e42;
border-bottom: 1px solid #855e42;
}
#NavbarMenuleft {
width: 1200px;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #ff0000;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: bold 12px Arial, Tahoma, Verdana;
}
#nav li a:hover, #nav li a:active {
background:#ffffff;
color: #8b5a00;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #cdaa7d url(https://3.bp.blogspot.com/_zO7E0wkpor4/TUzT8qbOyvI/AAAAAAAACds/ASv7BABxWzY/s1600/white%2Bto%2Bblack.png) repeat-x top;
width: 140px;
color: #fff;
text-transform: capitalize;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #855e42;
border-left: 1px solid #855e42;
border-right: 1px solid #855e42;
font: normal 12px Arial, Tahoma, Verdana;
}
#nav li li a:hover, #nav li li a:active {
background: #ffffff;
color: #8b5a00;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

 
Updated 7-11-2012

  • (OLD BLOGGER) After the first ” /b:section – /div ” which is after the header code at the bottom of the template and before the “ div id=’content-wrapper’ ” paste the following code:
  • (NEW BLOGGER) After the first “/header” paste the following code:

<div id=’NavbarMenu’>
<div id=’NavbarMenuleft’>
<ul id=’nav’>
<li><a expr:href=’data:blog.homepageUrl’>Home</a></li>
<li><a href=’#’>SECTION</a>
<ul>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
</ul>
</li>
<li><a href=’#’>SECTION</a>
<ul>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
</ul>
</li>
<li><a href=’#’>SECTION</a>
<ul>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
</ul>
</li>
<li><a href=’#’>SECTION</a>
<ul>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
</ul>
</li>
<li><a href=’#’>SECTION</a>
<ul>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
</ul>
</li>
<li><a href=’#’>SECTION</a>
<ul>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
</ul>
</li>
<li><a href=’#’>SECTION</a>
<ul>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
<li><a href=’https://theredheadriter.com/’>SECTION</a></li>
</ul>
</li>
</ul>
</div>
</div> <!– end navbar –>

 

  • Click PREVIEW to make sure you did it right

 

  • If it looks good, SAVE TEMPLATE

 

  • If it looks wrong, CLEAR EDITS and start over again.

 

 

  • Now go back into your code and everywhere that it has the link to my blog, replace it with the link to your blog and everywhere it says “SECTION,” replace it with the menu word you need.
  • Then repeat the directions starting at PREVIEW.

 

Services Offered

So you are excited about the menu bar, but you need help with a few changes that you want to make to it because the directions above just make you want to jump off a high cliff? That’s okay because you are not on the cliff alone.

Do you want different colors without bothering with it yourself?
Send me an email with MENU BAR in the subject line or drop me a comment in this post with your email address and I will send you my PayPal information.

Do you need help with the words in the menu bar?
Send me an email with MENU BAR in the subject line or drop me a comment in this post with your email address and I will send you my PayPal information.

Do you want me to adjust the colors, change the words and install the menu bar on your Blogger blog?
Send me an email with MENU BAR in the subject line or drop me a comment in this post with your email address and I will send you my PayPal information.

You didn’t think I would show you something fantastic and then leave you without a way to get it on your blog did you?

What do you think about the drop down menu – navigation bar?


Woo Us To Your Blog

 

The last “Woo Us To Your Blog” post was about putting a Copyright On A Photo so that no matter where your photo goes, your copyright goes with it. Do you remember the post and have you started copyrighting your photos yet?

 

The Redhead Riter

Reader Interactions

Leave a Comment

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

Comments

  1. Loved this post Red. I think I'd like to do something like this for my blog. Or maybe have you do it…I'll have to have a pow wow with the Warden…I mean husband, to see what he thinks.

    Reply

  3. Thank you for posting this step-by-step post. It is so helpful. I'm dedicating today to redoing a few things on my blog like a new template and layout and then making the drop down menu. If I'm pulling my hair out by this afternoon then I'll take you up on your services offered.

    This is such great to know stuff, I've been tweeting your post this morning. 🙂

    Reply

  4. Red, I just recently, as you know, began using the copyright on photos. How do I go back or should I go back & change all the photos from when I began blogging?…:)JP

    Reply

  5. I'm a new GFC follower & subscriber and your tech articles are fab! I'm in the process of researching what is required to move from Blogger to WP and I'm looking forward to reading your archives and more of your future posts!

    I hope you'll visit and join me at Create With Joy when you have a moment!

    Ramona
    http://create-with-joy.blogspot.com

    Reply

  6. I just used your directions to make a favicon, and they worked wonderfully! I don't have time to do the drop down menu right now, but when I do, I'll be back! 🙂 Thank you!

    Reply

  8. Thank you SOO Much for this tutorial.
    I was wondering if you could help me center mine. I would like to center it a little better and I can't seem to do it. I would like it so it doesn't float to the left..
    Any suggestions?

    Reply

  9. You ROCK! This is by far the easiest tutorial I have found for the drop-down menu! Gonna put it on my new ToysInTheDryer.com blog tomorrow and this time I KNOW I can follow the directions! Should be easy-peasy! Thanks for the step-by-step!

    Reply

  10. this all looks great but I think I’m in over my head. I would like the side bar with all my posts organized by dates deleted and all my posts organized into a navigation menu with the following categories:
    Family & Faith, Doula, nursing, and breastfeeding stuff, Dr. Kent’s 2¢, Recipes, DIY Crafts, Homemade gifts, Homemade products, Fashion, Is this “a southern thing?”, Other on-goings-on I also want my page centered. can I just pay you to do that? What’s you’re quote? If you can help me with this, I will definitely use you for regular maintenance in the future. Just send me an e-mail.
    Thanks,
    Brooke

    Reply

  12. Can you update this for the current templates/layout that blogger uses?

    Following your directions, using ctrl-f to search, I don’t have ” div id=’content-wrapper’”.

    Thanks!

    Reply

  13. Howdy!

    I spent some time playing with it, and got it working…mostly. If you take a peek at my blog (www.exstressyourself.com), you’ll see what I mean. The background over the top row isn’t transparent, it has a white background. When I put all the code (with my small adjustment) into dreamweaver, it looks correct. No white tabs. I can’t figure out why it has the white tabs in blogger though… any help would be great! 🙂

    The problem lies somewhere in what blogger does to the header section. If I move the gadget to any of the other columns it appears correctly…but when moved to the header section (so that it becomes navigation), then the tabs turn white…

    To get it working…
    Go to the layout section of your blog, and click add gadget…and add an html/javascript gadget.
    Open/Edit the gadget, take the first half of your code above and paste it in. Then at the top of the code, add and at the bottom add .
    Then I pasted in the second half of the code.

    After that I changed the image, but haven’t changed the links yet.

    Thanks!

    Reply

  16. Been working on giving a new look to my blog. Currently, my navigation bar is above the header section, but I wanted to move it below the header for my blog’s new look.

    For some reason, every time I moved that block of … code below the header code, it disturbed the entire layout after that! The sidebar, instead of being next to the main-wrapper, went after the main-wrapper!

    Then I landed on your post. And saw something about a “content-wrapper” section, which wasn’t there in my blog code! Copied those “content-wrapper” bits from another blog template and now it’s cool! I’ve finally got the layout in order, though it’s still on my test blog. Now just need to perfect the CSS for the navigation bar & tweak up my new header image, and will then transfer everything to my actual blog!

    Thank you sooooo much for sharing this post! It is one of the “easiest-to-follow” tutorials that I have come across on this topic!

    Reply

    • Thank you Kaddu! I’m glad you found it helpful. I try to do all my blogging tips for someone who knows very little, if anything, about the computer. That makes them fail safe and shows everyone that coding can be fun!

      Reply

  17. hi..how to add submenu in header..i already had dropdown menu in it but i want to make further category of it, but i am unable to do so..help me!!

    Reply

    • Are you a spammer? The reason I ask is because you already not only have a menu, but you also have several submenus deep. AND my tutorial shows you how to make a submenu already.

      Reply

  19. I tried and tried and I still can get it. I can’t find “/b:section-/div” Nor can I find “div id=content”. I even tried on dummy site and that code is not there. Could it be written out differently in this up dated blogger?

    Reply

  20. What do you charge to analyze my blog site, give me a few tips and improve SEO?

    Also, would WordPress be a better way to go or is blogger ok.

    Reply

  21. Hey there, great post! I have been trying to follow your instructions for a few minutes now and I keep getting: Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly. XML error message: Open quote is expected for attribute “{1}” associated with an element type “id”.

    Error 500

    I’m not sure what is going on? I deleted my previous menu bar and it still doesn’t seem to be working:( Would love your help, if you could send me an email, that would be awesome;) Thanks!

    Reply

    • Did you paste over the part that says “TABS” (lines 273-307) and the part after the /header “div class=’navbar section” (lines 590-599) which is the current nav bar tabs in your current theme?

      Let me know how it works.

      Reply

      • I had to come back to check to see if you responded. There is so much code in my template, I don’t wanna mess anything up lol my TABS and NAV BAR have two different places in my code, if I copy and paste your code to replace both of mine I will end up deleting other code in between the two. This is too confusing I think. I’m not great at figuring this all out. Need coding for dummies lol

        Reply

        • I am looking at the code on your blog. You have a section that says:

          /* Tabs
          ———————————————–

          and ends:

          text-decoration: none;
          }

          That is the Tabs section. You have to paste over that because it interferes with the other code if you keep both.

          The next section begins:

          div class=’navbar section’

          and ends:

          object[attribute] = val;

          You don’t have to worry about messing up. Replace the two sections and hit preview. If it doesn’t come out the way you want it to be, DON’T SAVE IT.

          Did that help?

          Reply

  22. Hello! A friend directed me to this tutorial about creating a drop-down menu on blogger, and I have just a couple of questions about it. When you say: “After the “descriptionwrapper” of your blog template, you will paste the following code.” where exactly is that? I see in my Blog’s HTML code a section that says “/* Header
    ———————————————– */
    .header-inner .Header .titlewrapper,
    .header-inner .Header .descriptionwrapper {
    padding-left: 10px;
    padding-right: 10px;
    }

    .Header h1 {
    font: $(header.font);
    color: $(header.text.color);
    }

    .Header h1 a {
    color: $(header.text.color);
    }

    .Header .description {
    font-size: 130%;
    }”
    Do I paste the code somewhere within this section, or after it? (the next section is “Tabs”).
    And as for the second code that you give, do I paste that after the above quoted “header” section, or directly after the code for the Navigation Menu, or somewhere completely different? I’m just not sure where “the first “/header”” is…
    Sorry if this question is confusing… I do know how to work with HTML code, but I’m just not sure where I should paste these two codes.
    I’ve tried pasting them both a few different ways, but the preview keeps showing up as a blank page with just a “#” in the corner, and my web browser tells me it is somehow blocked…. I must not be doing something right.
    Help?
    Thank you in advance!
    -Mel

    Reply

    • I just played around with your template and couldn’t make the code work. I’m not sure what is in the “Travel” template that is so different than the rest. Hmm….I don’t have time right now to work on it, but I will try to get it to work. If you come up with a solution before I do, check back and let me know what you did to fix it. 😀 It sure is aggravating to get that stupid template error message! LOL Grrrr….

      Reply

      • Thank you for the prompt reply, and for looking into that for me..
        It is kind of frustrating with this error… I’ll work on it again today, and see if I can get it to work. And if I do, I’ll be sure to let you know. Thank you for your time! 🙂
        -Mel

        Reply

          • Hello, again!
            I’ve decided after tweaking the design of my blog a little, that I really don’t need a drop-down menu for what I was thinking.. I’ve widen the navigation bar, and everything fits nicely, without looking squished.
            Perhaps someday I’ll be needing a drop-down menu for another blog (which I’m sure I will in future) in which case, I will definitely be using this tutorial. Thank you for your time and thought!
            God bless,
            -Mel

            Reply

            • Mel,

              I think your blog looks awesome and so does your navigation bar! It fits perfectly and does NOT looked squished at all. Way to go!

              Sorry I didn’t have a “fix” for you.

              Reply

  25. I’ve been wanting to incorporate a drop-down menu on my blogger site and have seen so many different ways to do it my head is dizzy. You seem to have a good explanation but I’m still confused and not sure that I can get it done on my own. Do you provide a service to do this and if so, how much?
    Thank you,
    Laura

    Reply

  26. May I ask what you’re meant to put in the # for the section code? I think it is the page URL but I wanted to check to be sure. Thanks!

    Reply

  27. Hi— the first part of the code works fine but when I add the second part after header, I get an error message…I’ve tried it a couple times… does this look right

    etc….

    thanks for any help you could provide! Deb

    Reply

    • You have to be very careful that you replace the code EXACTLY in the right place and that you use the full code. Without actually going into your blog and doing it, I don’t know where the error is being made or if there is something different about your blog compared to others. Good luck and let me know what you finally figure out!

      Reply

  28. This is exactly what I was looking for. but I am such a dumb blonde and so new at all of this. Dont even know where to start. Umph 🙁 So scared to do something wrong

    Reply

  29. Thank you! This looks great and is working well, but I had one question.
    How can I make the main navigation menu links centered? I managed to center the drop down menu links, but couldn’t figure out how to get the main menu links centered.

    Reply

  30. With havin so much written content do you ever run into any issues of plagorism or copyright infringement?
    My blog has a lot of unique content I’ve either created myself or outsourced but it looks like a lot of it is popping it up all over the internet without my agreement. Do you know any solutions to help protect against content from being stolen? I’d truly appreciate it.

    Reply

Trackbacks