How to Create a Drop-Down Menu In Blogger

 

Hi there! It’s Heather from Blogs By Heather and I am happy to share this Blogger tutorial with you at @ All She Cooks.  Today you’ll learn how to create a drop-down menu in Blogger! How cool is that!
Hand Stamped By Heather

We will be modifying “code” to create this type of dropdown menu but don’t worry, we’ll take it one step at a time!

Step 1: Choose Colors
First, notice my nav bar area is pink. It matches the colors of my artwork in m banner. I also have the dropdown menu have a beige background. Notice the text color is shades of brown as well. So, what you want to do is first go HERE to choose a set of colors that best match your site’s color scheme.

  • Main Nav Bar color
  • Main Nav Bar text color
  • Main Nav Bar link “hover” color (means it changes color when your mouse is over the text in the main menu)
  • Dropdown Background color
  • Dropdown text color
  • Dropdown link “hover” color

So for mine example, here is what my set of colors look like:

  • Main Nav Bar color: Pink hex value is #ecbbc0
  • Main Nav Bar text color: Brown hex value is #8f6f53
  • Main Nav Bar link “hover” color (means it changes color when your mouse is over the text in the main menu). Dark brown hex value is #382817
  • Dropdown Background color: light beige hex value is #feecd6
  • Dropdown text color: Brown hex value is #8f6f53
  • Dropdown link “hover” color: Dark brown hex value is #382817

So be sure to jot down your colors as we will use the hex values in the code throughout this tutorial.

Step 2: Prep Work
In order to add the dropdown navigation bar, you have to be able to Add a Gadget to the header area, near your banner/header image.  By default, many templates have this option set to “no” and therefore you don’t see the Add a Gadget link option in that area, only in the sidebar and footer areas right?  So we need to first change that.
Go to Template, then Edit HTML and then click Proceed. If you are using the Old Blogger interface, then go to Design, then Edit HTML.
Once to the code window, scroll down towards the bottom looking for this block, specifically

(not the stuff that has my personal Title). You can also use CTRL+F to open the “Find” box to try to quickly find the header-wrapper.
You are going to change the values for:

  • maxwidgets: from 1 to 10
  • showaddelement: from no to yes
  • locked: from true to false


so in the end it looks like this:

Click to Save Template (or Save in old Blogger interface).
Then when you go to Layout (or Page Elements in the Old Blogger interface), you will now see the  Add a Gadget option in the header area above your banner/header/title area (like you see in my example above “Hand Stamped By Heather”.

So far so good,  you are doing GREAT!

Step 3: Get Starting Set of Code
Next, everyone is going to start with the same set of code for the dropdown menu exercise consisting of 4 menu items.
Please go HERE and select all the code and copy it.  Yes, it says its for a TypePad blog, but we are going to use the same code in Blogger!

Step 4: Paste Code in HTML/JavaScript Gadget
While in Blogger, go to Layout (if using old Blogger interface, go to Design and then Page Elements), and then click Add a Gadget.
Choose the HTML/JavaScript Gadget shown below.

And then paste in all the code in the large text box area.

Step 5: Modify the code
In this part of the tutorial, we will scan through certain areas of the code and modify the existing hex color values with our set of hex color values, as well as make a few other modifications to the defaul, starting set of code. You will replace the sample values that I have used with your own.
First, let’s start with this set of code.
In the #centernav section The only thing here you want to play with is the width. Notice I set mine to 1100px that is because that is the width of my banner. Don’t know the width of your banner? Then try setting to 100%. Leave the ; (semi-colon).
Second in the #dropnav part of the code, you will set the background color to one of the colors you choose in Step 1. In my example, you see #ecbbc0 which is the pink you see in the main nav bar area.

In the next set of code you will modify the following:

  • the #dropnav li a color is the color of the text on the main nav bar. Mine is set to #8f6f53 which is a brown. Please set that to one of your text colors chosen in Step 1.
  • the #dropnav li a:hover color is what color the text on the main nav bar will turn to if your mouse goes over it. I set mine to #382817 which is a Dark Brown.  Please set that to one of the colors you chose.
  • the #dropnav li ul background-color is the color of the dropdown menu. In my example it is a light beige #feecd6.  Please set to your color chosen in Step 1.

In the next set of code you will modify the following:

  • the #dropnav li li a color is the color of the text in the dropdown menu. Mine is set to #8f6f53 which is a brown. Please set that to one of your text colors chosen in Step 1.
  • the #dropnav li li a:hover color is what color the text on the dropdown will turn to if your mouse goes over it. I set mine to #382817 which is a Dark Brown. And notice is set the text-decoration to underline as well. Please set that to one of the colors you chose.

Now you have changed the color and some of the width elements to customize your new dropdown nav bar.  Now it’s time to build it!

Step 6: Modify code in building the menu elements
In this section we are going to continue modifying the code, but the “fun stuff” where you are actually now building your menu!
Keep in mind that before you start this section, you want to jot down the pages on your site or the posts or the Labels (categories) you want to link to.  What I mean is that you need the URL of each item you want to “link” to from your nav bar.  You will see what I mean through the following examples in building my dropdown menus.
Let’s begin.
Continue through your code looking for this area for Menu #1.  This is typically used for “Home” which would be your blog address.

You would replace the # in the href area with your blog address as you see in the example below. And replace the text Menu Item 1 with the word Home.

You are doing GREAT! Let’s keep going onto item #2. Here you may or may not replace the first # wiht the main title Menu Item 2 as you will be entering a bunch of sub menu items on this example.
Replacing hte # with actual URL addresses to pages, posts or categories on your site, or external links to other sites.

Let’s examine a sample.  Notice sub menu item 1 in my example is now Scrapbooking and the # is changed to a long URL to the category on my site called “simply scrappin kit”. If you are looking for the URL of one of your caegories (labels) on your site, add the Labels widget and then when it appears on your sidebar, you can right-click on a category and get the URL to use here in your dropdown menu.
In my example I chose 4 categories from my blog to create a dropdown item called Popular Posts. You may also link to “pages” or other “posts” on your site. The key is getting the URL and replacing the #.

Onward to Menu #3. This is again the same process as Menu #2 above. Just more practice for you with replacing the # with URLs and replacing the text “sub menu item 1 thru 4″ with real labels for your menu.

In my example, I created a Popular Techniques menu that has 5 menu items. To create the 5th item, I simply copied the 4th and then made the substitution for the URL and the Label (sub menu item). Give it a try!

Last but not least, I did a simpler Menu #4.  As you will see in this example, I do away with the sub menu items and simply leave a main item.

Removed all subnav section entirely in this example and just replace the # with a URL and text for the Menu Item 4.

Let’s see how you did! Click Save Changes.
Before clicking View Blog, make sure you drag the newly added HTML/JavaScript gadget UNDER your banner/header if that is where you want your drop down nav bar to be (as shown below).

Closing Notes
If you find that it is not quite fitting into the space you want, then adjust the width we set in Step 5.
If the sub menu item text is larger than the background color area, then find #dropnav ul li code and in that section increase the width from 150px to say 200px to start with and increase from there.

If you have any questions please check out the drop-down menu notes here on my blog. That article is part of my 101 Blogging Tips series and links to other articles are well for creating a drop-down menu and additional examples.

Get Sponsored by Big Brands

Jessica McCoy

Jessica McCoy

Publisher, Editor and Author at All She Cooks
Jessica McCoy is the publisher and primary editor behind All She Cooks. She enjoys recipe development, food photography, as well as food and travel writing. You can find Jessica on Facebook, Pinterest, Twitter, and Google +.
Jessica McCoy
Jessica McCoy
Jessica McCoy

Latest posts by Jessica McCoy (see all)

Comments

  1. The Home Payge says

    Love love love! I have a degree in information technology so I know the basics of HTML but never have I been able to fully understand it! This will help so much! Thanks!

  2. Ashleigh Evans says

    Not gonna lie, it’s a bit over my head…but I’ll try it! I have been trying to figure out how to do this for a while now! THANK YOU!

    Ashleigh
    BeingCheapIsEasy.com

  3. Leslie Frances says

    Thanks, I have the code in my template but I do something wrong and get am error when I try to add in a link and title. I will reference your code to see what is wrong with,my syntax.,

  4. Robin says

    Heather, This was such a great tutorial. I used it immediately on my blog. However I am having a small issue that I thought that you might be able to help me with. I currently us Chrome as and everything works perfectly. However when I try to view my blog with IE the drop down menus only show 2 headings, instead of 4. Do you have any idea as to how I can fix this? Please help – I have tried everything that my limited skills could think of to fix it.

  5. Rebecca Howarth says

    wonderful tutorial! now to put it all together, let’s see how we go. fingers crossed…

  6. Charlie Jones Foundation says

    Hi Heather,

    How do I position the text so it is in the centre of the new nav bar rather than at the top?

  7. Leisure M. says

    Thanks so much for posting this. I wanted a drop down menu but couldn’t understand the directions that i’ve seen on other sites. I followed your directions but my menus aren’t working. Would you please email me leisure@navywif33.com

  8. MaJo BV says

    thank you! very clear but I can’t get the drop down menus to work :(
    any ideas?

  9. Deependra Singh says

    Hey Jessica McCoy,
    I want the template of this site, Can you please give me that??

  10. says

    I totally need this! Thank you so much for sharing this great tutorial. I’m trying it out today. Have a wonderful weekend!

    • says

      Your welcome. I’m glad it is useful for you! The guest blogger did a wonderful job on this tutorial. Be sure to check out her blog if you have any questions along the way.

  11. says

    Hi Heather! Thank you so much for this tutorial. I’ve run into the problem of the main tabs being really far apart and the dropdown menus not displaying fully (it’s as if they are cut off). I’m assuming there is a simple way to center and tighten up the spaces between the main tab buttons as well as increase the height of the tab bar gadget without actually making the bar thicker to allow for space for the tabs to drop down. I included my test blog site. If you have a chance to check it out, I’d be ever so grateful!!!
    Stephanie recently posted…Test MediaMy Profile

    • says

      Hi Stephanie- check out near the bottom of the post. There is a link to Heather’s website to look for further information and/or to contact her directly. She was guest posting on this so doesn’t receive these comments directly.

  12. Brecht says

    I used your tutorial and everything worked fine, but after a while i wanted to add another menu item. But now the part to edit the style, colour, etc of the html code disappeared. The part to add other menu items still remains.
    Have you ever encountered such a problem?

    Brecht

    • says

      Hi Brecht,

      I would suggest looking at the additional links the guest-poster gave for more information on her website. She’s a pro, so would be able to assist you with your questions. Thanks!

  13. kohila says

    I is not working for my blogspot.Why? I followed the instructions very carefully even though it is not working. It is showing a yellow background and black outline for letters. The menus are not droping. Glad if helped.

    • says

      Please use the contact information the blog post or look on the guest-bloggers website for more information. She is the one who will know.

  14. Reema says

    Hi, this tutorial is no longer working for me…I think its because Blogger changed their HTML interface….Could you please please please update it! I would appreciate it so much:)

    • says

      Hi Reema and others who might have questions about this tutorial… the author of this articles blogs at http://www.blogsbyheather.com/. If she is able to answer you, I’m sure she will as quickly as she can, however she does not receive updates when comments are left on this post. For that reason, I am going to close comments on it. Please check in with Heather to see if she is able to assist you with your questions. Thanks!