Add Custom Drop Down Menu To Templates by Josh Peterson

With the introduction of Blogger Template Designer, template editing has become more difficult for newbies due to excessive use of dynamic coding. The Famous templates are designed by Josh Peterson which includes the watermark and Picture Window template. image

I introduced a drop down menu  in my earlier post and some of you had problems adding it to the new blogger templates. The code didn't work with the new templates because the CSS code I used was override by Josh's code. To solve this problem we will need to deactivate Josh's coding from your template. We can do that in easy steps as discussed below.

 

Live Demo

Add Drop Down Menu To New Blogger Templates

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template and search for a similar code like this one,

/* Tabs
----------------------------------------------- */
.tabs-inner .widget ul {
  padding: 0;
display:none;
  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll bottom;

  -moz-border-radius: $(tabs.border.radius);
  -webkit-border-radius: $(tabs.border.radius);
  -goog-ms-border-radius: $(tabs.border.radius);
  border-radius: $(tabs.border.radius);
}

.tabs-inner .widget li {
  border: none;
display:none;}

.tabs-inner .widget li a {
  display: inline-block;

  padding: .5em 1em;
  margin-$endSide: $(tabs.spacing);

  color: $(tabs.text.color);
  font: $(tabs.font);
display:none;
  -moz-border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;
  -webkit-border-top-left-radius: $(tab.border.radius);
  -webkit-border-top-right-radius: $(tab.border.radius);
  -goog-ms-border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;
  border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;

  background: $(tab.background);

  border-$endSide: 1px solid $(tabs.separator.color);
}

.tabs-inner .widget li:first-child a {
  padding-$startSide: 1.25em;
display:none;
  -moz-border-radius-top$startSide: $(tab.first.border.radius);
  -moz-border-radius-bottom$startSide: $(tabs.border.radius);
  -webkit-border-top-$startSide-radius: $(tab.first.border.radius);
  -webkit-border-bottom-$startSide-radius: $(tabs.border.radius);
  -goog-ms-border-top-$startSide-radius: $(tab.first.border.radius);
  -goog-ms-border-bottom-$startSide-radius: $(tabs.border.radius);
  border-top-$startSide-radius: $(tab.first.border.radius);
  border-bottom-$startSide-radius: $(tabs.border.radius);
}

.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
  position: relative;
  z-index: 1;

  background: $(tabs.selected.background.color) $(tab.selected.background.gradient) repeat scroll bottom;
  color: $(tabs.selected.text.color);
display:none;
  -moz-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
  box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
}


You just need to remove the comment quote from the top i.e.

*/

and add it to the bottom as shown below:

/* Tabs
-----------------------------------------------

.tabs-inner .widget ul {
  padding: 0;
display:none;
  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll bottom;

  -moz-border-radius: $(tabs.border.radius);
  -webkit-border-radius: $(tabs.border.radius);
  -goog-ms-border-radius: $(tabs.border.radius);
  border-radius: $(tabs.border.radius);
}

.tabs-inner .widget li {
  border: none;
display:none;}

.tabs-inner .widget li a {
  display: inline-block;

  padding: .5em 1em;
  margin-$endSide: $(tabs.spacing);

  color: $(tabs.text.color);
  font: $(tabs.font);
display:none;
  -moz-border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;
  -webkit-border-top-left-radius: $(tab.border.radius);
  -webkit-border-top-right-radius: $(tab.border.radius);
  -goog-ms-border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;
  border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;

  background: $(tab.background);

  border-$endSide: 1px solid $(tabs.separator.color);
}

.tabs-inner .widget li:first-child a {
  padding-$startSide: 1.25em;
display:none;
  -moz-border-radius-top$startSide: $(tab.first.border.radius);
  -moz-border-radius-bottom$startSide: $(tabs.border.radius);
  -webkit-border-top-$startSide-radius: $(tab.first.border.radius);
  -webkit-border-bottom-$startSide-radius: $(tabs.border.radius);
  -goog-ms-border-top-$startSide-radius: $(tab.first.border.radius);
  -goog-ms-border-bottom-$startSide-radius: $(tabs.border.radius);
  border-top-$startSide-radius: $(tab.first.border.radius);
  border-bottom-$startSide-radius: $(tabs.border.radius);
}

.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
  position: relative;
  z-index: 1;

  background: $(tabs.selected.background.color) $(tab.selected.background.gradient) repeat scroll bottom;
  color: $(tabs.selected.text.color);
display:none;
  -moz-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
  box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
}

*/

 

3. Save your template and you are done! You can reactivate the above coding anytime you want by reversing the step.

Now add your drop down menu happily by reading this tutorial -> Drop Down Menu

The only thing you need to do extra is to use the CSS code below instead of the one I shared in the earlier tutorial. Rest all steps are exactly the same.

/*----- MBT Drop Down Menu ----*/

#mbtnavbar {
    background: #060505;
    width: 100%; 
    color: #FFF;
        margin: 10px 0;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;

}


#mbtnav {
    margin: 0;
    padding: 0;
}
#mbtnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#mbtnav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #333;
        border-right:1px solid #333;
        height:34px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Helvetica, sans-serif;
   margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
      

}
#mbtnav li a:hover, #mbtnav li a:active {
    background: #BF0100;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
      
  
      
}

#mbtnav li {
    float: left;
    padding: 0;
}
#mbtnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#mbtnav li ul a {
    width: 140px;
}
#mbtnav li ul ul {
    margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
    left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
    left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
    position: static;
}

#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
    background: #BF0100;
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;

  
}
#mbtnav li li a:hover, #mbtnavli li a:active {
    background: #060505;
    color: #FFF;
    display: block;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

 

 

If you needed any further help feel free to ask. Peace out.

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

52 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Thanks so much for working on this for me. I've got everything updated but still having a hard time with the drop down menu. Its not showing all of the links. Is there a height adjustment that I should make?

    Many Thanks :)

    ReplyDelete
  2. You know what.. I got it!! I just deleted the entire "Tabs" section from the original code written by Josh. Just I just need to get rid of the dotted lines and I'm finished!! Horray!!

    ReplyDelete
  3. @Meg
    To remove the dotted lines find and delete this code,

    border-bottom:1px dotted #333;


    You can change dotted to solid, dashed is you want.

    And you are always welcomed. :>

    ReplyDelete
  4. but it's not rounded shape :(

    ReplyDelete
  5. @Mohammad Mustafa Ahmedzai

    I think he will update a post on that to integrate the rounded corners CSS to the tabs... right? :P

    ReplyDelete
  6. Moving the */ made: 1) the menu appear as all white (background and text) with black lines separating the menu items and 2) did not make the menu span the entire width of my header. When I hovered over where I thought a menu items would be, it did give me the drop down menu and I could see the drop down menu options.

    It seems in my case that the simple template doesn't like having the */ moved.

    Thanks for your help. Do you have any other suggestions?

    ReplyDelete
  7. i dont know whats wrong...i cant made the drop down.. it wasnt show correctly.

    i take a screenshoot of it
    http://i287.photobucket.com/albums/ll160/lenalinah/untitled-2.jpg

    ReplyDelete
  8. Is there a limitation to 4 tabs in the code.
    Mine is showing only 4 tabs, the other 3 I want to add are displayed like code lines under the main menu.
    thank you for your time

    ReplyDelete
    Replies
    1. I had a similar issue; that really depends on how long each tab title is and the designated width for your nav bar.

      Delete
  9. Thanks a lot. Finally it worked in my blog :)

    ReplyDelete
  10. there is some problem it shows only upto one level

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. Thank you so much for this post. Your code solved a problem I had been trying to figure out for hours! Just one issue: the drop-down menu works perfectly in Firefox, Chrome and Safari, but for some reason does not work in IE (IE8, which is what I and most of my readers use). When I hover over the tab, the menu drops down, but it is partially behind the rest of the text on the page and I can't select any of the links. Any idea how to fix this in IE?

    ReplyDelete
  13. This is great, but I'm not able to get it to work on IE browser only FF. Any clue what this issue is?

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. Here are the issues I'm having using this navbar.
    1. The drop down menu works, but only for two rows. When I mouse over the 3rd in the list, the list disappears, I cannot select or highlight it.
    2. Asthetically, I would like to remove the bottom border color on the navbar so there are no borders. I've acheived this with the top, right and left, but the bottom still remains.
    3. When a link is selected, it is boxed in with a dotted line. I would like to remove this.

    Your help would be so appeciated. Thank you for the work you've done.

    ReplyDelete
  16. amazing post.............

    ReplyDelete
  17. I can't use this in the other templates. I just get an error. I would like to use another one. How can I make it work for the other ones?

    I would like to use the Etheral template by Jason Morrow.

    ReplyDelete
  18. Doesn't work after I move the */ part and save template I get an error. This is very frusterating. No drop down menu tutorials ever work for me. =(

    ReplyDelete
  19. http://anmolrawat.blogspot.com/

    ohk i got it by moving star. now the problem is that i have added the link in the html of a particular label.. everything is fine.. when i click the tab, it goes to the link but here comes the problem.. it says no post under the label... while if i click on that label through labels under the post i can see the post..
    plz reply asap .. m so frustrated..

    ReplyDelete
  20. oh got it.. my bad.. for readers if you encounter same problem, just avoid capslock in labels as the javascript widget don't support it

    ReplyDelete
  21. just one problem now, go to my blog and see, the drop down menu works fine now.. just when we drop down the selected tab is not highlighted.. any solution?

    ReplyDelete
  22. Thanks for the post - really helpful! However, when I add more than 3 items to the drop down menu, the menu splits apart. http://www.bgstest1.blogspot.com/ (hover over "She Surfs" in my nav bar). Any fixes for this?

    Thanks! :)

    ReplyDelete
  23. Hello Mohammad, thank you for your support here on this issue. I know you have had a ton of responses and I am just one more in the pile but I do believe I need your help as well. ;-) I, too, have a Josh Peterson template and did as you instructed in this post. However, I cannot get my sub-categories (my drop downs) to actually drop down. They are hovering next to the actual tab I created. For example, I created a Food tab and then I wanted to create a Flour category for one of the drop down menus. I cannot quite figure out what is wrong. Can you take a look and let me know what you think? I would appreciate it SO much! www.jokes-on-you.com Blessings, Kim

    ReplyDelete
  24. Hello Mohammad,
    I have applied your menu in my blog
    http://downnapp.blogspot.com
    But as you can see the drop out menu is covered with the main wrapper.
    Do you have any idea of how to fix this ?
    Thanks in advance

    ReplyDelete
  25. i want to remove the drop down menu how could i do that???

    ReplyDelete
  26. same problem of me sir.It cannot works in the add html/java widgets.And I try also in adding it using the html editor it will not work in new blogger template of picture window

    ReplyDelete
  27. I am not getting a drop down list :-(

    ReplyDelete
  28. Hi Mohammed!

    Thank you so much for this tutorial. The dropdown menu works so well on my blog about ADHD www.JuliannaNWilson.com

    My problem is that when accessing my blog through Safari, the dropdown menu doesn't work. Do you know a trick that can help me solve this? It doesn't seem to recognize the page headers as links. In addition to this, the dropdown menu doesn't work.

    Thank you again for your help!

    Julie

    ReplyDelete
  29. Thanks for the great menu! I have implemented it, but it's not working correctly in IE. http://extremecouponprofessors.blogspot.com/

    The dropdown is there, but it's behind the page elements even with Z-index 9999. It works fine in Firefox.

    Also, it still has the dashed line in the dropdown and as the top border of the navbar even though I changed the css to have solid borders.

    Thanks for your help!

    ReplyDelete
  30. Hello Mohammad.
    would this method also work for the 'Awesome' blogger templates by Tina Chen?
    The notes above do not translate exactly, so I wanted to check before calving up my template beyond repair.
    For example, where to place the */ is not the same, and it is not clear where in the code I should add your CSS code for the drop down menu. Does it go directly under the /* Tabs section?

    p.s. the blog im trying to build is http://securenetconsulting.blogspot.com/

    many thanks

    ReplyDelete
  31. hey Mohammad,
    i ve been reading your posts and thanks to you, i ve been able to add so many things to my blog. However, i have one question. I want to add this drop down menu to the left hand side of my header. Can you help??

    ReplyDelete
  32. I am still having the the same problem with the drop down. When I hover over the top tab they all show, But when I move my courser down to select a page the drop down disappears. If you could please help my link is:

    http://addressmthl.blogspot.com/

    I also cannot get rid of the red dotted lines, by deleting border-bottom:1px dotted #333;

    Please Help

    ReplyDelete
  33. I found where the problem comes from. However I do not know how to fix it. When I change the font to a larger size (from 12px to 20px) the drop down disappears when you move down the list.

    http://addressmthl.blogspot.com/

    ReplyDelete
  34. hello my name is muzammal
    mere blog me har cheaz dubble ho gai ha pleaz help me
    http://artistic4u.blogspot.com/
    this my blog link
    pleaz help me ok bay

    ReplyDelete
  35. Dear Mohammad.
    Thank's for sharing this knowledge. I am really grateful.
    I have followed your instruction, and it works.
    Then I enlarge the font on the "MAIN MENU", and the "SUB-MENU" as well, then I got a problem.
    Everytime I hoover the cursor on the "MAIN MENU" of the drop down menu, the "DROP DOWN MENU" shows up, but theres a gap between the "MAIN MENU" and "SUB-MENU".
    When I head the cursor to "SUB-MENU", the "SUB-MENU" disappear, due it has to "CROSSING" the gap.
    How can I fix this ?

    ReplyDelete
  36. I want to add breadcrumb in this template.
    How should I do??

    ReplyDelete
  37. Dear Mohammed,

    I did earlier creat a drop down menu from your post, but when i tried for the new drop down menu from this post i not able to get it. and moreover i don't have the /* Tab in my HTML, so i added it but still nothing happens as in your picture. please suggest. and give me solutions. my blog is http://www.blogs-in-blog.blogspot.com.

    ReplyDelete
  38. Hi, I followed your drop down menu instructions and was able to create exactly what I wanted for a menu. It works great using Safari with my Mac, but when I access the blog using Internet Explorer with my PC the drop down doesn't work. It shows up, behind my main blog and disappears as soon as I hover the mouse over it. Any idea why it would be doing this? Any suggestions would be much appreciated...the blog is arikandme.blogspot.com Thanks!

    ReplyDelete
  39. Thank you so much for figuring this out! I've been trying for days to figure out why my top level portion of the navbar had a white background on the "tabs". I used your trick to comment out the tabs part in the layout, and now its awesome!

    http://www.exstressyourself.com

    ReplyDelete
  40. sir good eve can you teach us how to create a separate pages in blogger just like the one in the top of your myblogger tricks

    ReplyDelete
  41. Thanks you very much. Give me suggestion to make my blog more attractive.

    www.easyhosting24.blogspot.com

    ReplyDelete
  42. Good but some feeling coming that its hard while editing and entering each links.
    I choose the blogger inbuilt option.
    Pages and its just works me without any hassle in 5 minutes.
    Check out here
    www.iosstuffs.blogspot.com

    ReplyDelete
  43. Hi! This works excellently, thanks so much. i have 1 little doubt tho: How do i add my search bar to the mbt nav bar? My widget id is #CustomSearch1 and below I've provided the code for my nav bar. I want the search bar to appear at the leftmost part of the nav bar.

    /*----- MBT Drop Down Menu ----*/

    #mbtnavbar {
    background-color: transparent;
    width: 1300px;
    color: #ffffff;
    margin: 0px;
    padding: 0;
    position: relative;
    border-top:0px solid;
    height:40px;
    }

    #mbtnav {
    margin: 0;
    padding: 10;
    }
    #mbtnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #mbtnav li {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: .9em transparent;
    border-right: .9em transparent;
    height:40px;
    }
    #mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
    color:#ffffff;
    display: block;
    font:normal 14px Georgia, sans-serif; margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;

    }
    #mbtnav li a:hover, #mbtnav li a:active {
    background-color: transparent;
    color: #ffffff;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 9px 12px 10px 12px;



    }
    #mbtnav li {
    float: left;
    padding: 0;
    }
    #mbtnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0;
    padding: 0;
    }
    #mbtnav li ul a {
    width: 170px;
    }
    #mbtnav li ul ul {
    margin: -25px 0 0 165px;
    }
    #mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
    left: -999em;
    }
    #mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
    left: auto;
    }
    #mbtnav li:hover, #mbtnav li.sfhover {
    position: static;
    }
    #mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
    background: transparent;
    width: 160px;
    color: #ffffff;
    display: block;
    font:normal 14px Georgia, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
    z-index:9999;
    border-bottom:1px dotted #333;

    }
    #mbtnav li li a:hover, #mbtnavli li a:active {
    background-color: transparent;
    color: #ffffff;
    display: block; margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
    }
    /*---------------End MBT Nav-----------*/

    ReplyDelete
  44. thank you soooooo much. I was really searching for this.!!

    ReplyDelete
  45. When I use this edit i have the same issue but no background to the tabs... http://www.davidsmommy.com/

    ReplyDelete
  46. This comment has been removed by the author.

    ReplyDelete
  47. Thanks a lot for this excellent tutorial....

    HTML coding is like rocket science for me so I used to experiment to improve my blog's look.

    Seven months back, I thought to add a menu(with dropdown list) to my blog. so I searched the web and found so many tutorials but I was unable to add them as new menu had conflict with template's codes. Every time I add the codes to CSS or widget, the end result would be a weird menubar in my blog. I finally decided to avoid menubar for my blog.

    But couple of days back, I came to know about the main reason of menubar failures after reading this tutorial. So again thanks for the same.

    Now I thoroughly read both tutorial (1. create-drop-down-menu-in-blogger and 2.add-custom-drop-down-menu-to-templates by Josh Peterson)and combined them and created a cool menu bar with smooth fading effects too.

    But again, I am facing a problem that I am unable to change color of active tab/page. I mean viewers will not get idea about where they are by looking at menu bar.

    I think you understood my query. I will be very much thankful, if you solve my doubt. And should I post the codes I used?

    ReplyDelete
  48. Please help, I also have the ethereal template and the above mentioned codes are not there. This is the only tab related codes in my template. Is there another code for this thank you so much

    <... class='tabs-outer'>

    ReplyDelete
  49. I know i am absolutely technologically challenged but i have done great putting my blog together.
    I am using the watermark theme and i need the dropdown menu for my blog. I have searched the code and the code given above doesnt work for me. I have been working on this for 3 days and trying to figure it all out but it doesnt work for me. actuallt the code above doesnt exist for me.

    Please help a desperate me. Thank you

    ReplyDelete
  50. Is there a way to make this drop down work on a mobile phone? If so, what do I need to do. Thank you for any help!

    ReplyDelete
  51. THANK YOU! I have been trying to get my drop downs to work for 3 hours! Your trick worked! I am so beyond grateful.

    ReplyDelete