Add a drop down menu that can be styled with template designer

simple-drop-down-menu

Todays tutorial is a simple CSS styled drop-down menu for Blogger. I have a previous tutorial here for the exact dropdown menu used on misseblog (demo). The problem is, because I styled it to look like the menu on misseblog as requested, some people found it difficult to customise further so I decided to create this simpliar tutorial on how to create a dropdown menu which can be styled using the Template Designer (Template > Customise > Tabs Background & Tabs Text) to make it easier to fit your design.

[postwarning]

Add the Menu

If you used the previous tutorial for a drop down menu, you should really remove that code in order to properly replace it with this one. Otherwise, you may have a couple of small errors – these can be easily fixed when you know what you look for but it’s just as easy to remove the previous code.

Then go to Layout > Add a new HTML/Javascript Gadget and add the following code to it.

<!-- START NAVIGATION BY XOMISSE -->
<div id="navigationbar">
<ul id='cssnav'>
<li class="active"><a href='LINK'>Home</a></li>
<li class="sub"><a href='LINK'>CATEGORY 1</a>
<ul>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 1A</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 1B</a></li>
</ul>
</li>
<li class="sub"><a href='LINK'>CATEGORY 2</a>
<ul>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 2A</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 2B</a></li>
</ul>
</li>
<!-- ADD MORE CATEGORIES OR LINKS HERE -->
<li class="last"><a href='LINK'>Contact</a></li>
</ul>
</div>  
<!-- END NAVIGATION BY XOMISSE  -->

Add another dropdown category

<li class="sub"><a href='LINK'>CATEGORY 3</a>
<ul>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 3A</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 3B</a></li>
</ul>
</li>

Add another link

<li><a href='LINK'>LINK-NAME</a></li>

Add the CSS

Add the following code to Template > Customise > Advanced > Add CSS. This will place the code above ]]></b:skin> in Template > Edit HTML. To change values via the Template Designer, go to Template > Customise > Advanced > Tabs Text and Tabs Background. I’ve added notes ( /* like this */) to help you customise the styling.

/* ----- START DROPDOWN CSS BY XOMISSE ----- */
#cssnav { 
border: 0px;
margin: 0px;
padding: 0px;
width: auto;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
color: $(tabs.text.color); /* Template Designer - Change Text Colour */
}

#cssnav ul {
background: $(tabs.background.color); /* Template Designer - Change Menu Background */
height: 40px; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
}

#cssnav li {
float: none;
display: inline-block;
padding: 0px;
}

#cssnav li a {
background: $(tabs.background.color); /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
text-align: center;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}

#cssnav > ul > li > a {
color: $(tabs.text.color); /* Template Designer - Change Text Color */
}

#cssnav ul ul a { 
color: $(tabs.text.color); /* Template Designer - Change Text Color */
}

#cssnav li > a:hover, #cssnav ul li:hover {
color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */
text-decoration: none;
}

#cssnav li ul {
background: $(tabs.background.color); /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 200px; /* Change Width Of DropDown Menu */
z-index:9999;
}

#cssnav li:hover ul {
display: block;
}

#cssnav li li {
background: $(tabs.background.color); /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px; /* Change Width Of DropDown Menu */
}

#cssnav li:hover li a {
background: #FFFFFF; /* Template Designer - Change Background of Link on Hover */
}

#cssnav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}

#cssnav li ul a:hover, #cssnav li ul li:hover > a {
color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */
border: 0px;
text-decoration: none;
}
/* ----- END DROPDOWN CSS BY XOMISSE ----- */

Dropdown menu not visible?

If you’re dropdown menu isn’t appearing when you hover over it, there may be something blocking it. Go to template > Edit CSS and find </b:skin>, above it add the following

.tabs-outer, .tabs .widget ul {overflow: visible;}

Header not full width?

Blogger by default has paddings and margins set up around your content. If you’ve set you’re navigation above to be 100% and there’s still a small gap on either side then we can add code to overwrite that. Go to Template > Edit HTML and find </b:skin>. If you can’t find </b:skin> check out this post for help. Add the following code above </b:skin>

.tabs-inner { padding: 0px; } .section { margin: 0px; }

This will remove the Bloggers default space around tabs. If there’s still a gap that you don’t want add the following above </b:skin>

.content-inner { padding: 10px 0px; }

If you want your header, navigation and footer to be the full width of the screen while keeping your main content area (posts + sidebar) the same width then check out the full tutorial for that here.

Elements losing styling/CSS when moved above header

Occasionally, putting certain elements above the header will remove the CSS associated with it. Here’s a solution to that. In the layout tab drag your header, navigation and any other gadgets down a little. It will jump to the second level, this shouldn’t affect the look of your blog (as in it will still appear at the top) but it will keep the styling. This image will hopefully explain that better.

move-header gadget

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.

236 comments

        • cassidy Wang on

          Hello, I’m having trouble adding the line I tried to but it didn’t show up, oh also is there anyway to adjust the width of the drop down tabs one by one? Thanks I’m a beginner so this coding is like a foreign language. (I included the part in the css where I added the coding you said to add above.

          Reply
  1. Rose W. on

    OMG This is awesome!!! I’ve been wanting to do this for months! This cleaned up my header soooo much, and my site looks much more professional and organized.

    Thank you so much for putting this up- you rock πŸ™‚

    ~Rose

    Reply
  2. Sarah on

    Hey ellie, do you if its possible to add an image as one of the headings in the nav bar? Say a social media like twitter to have the image in the nav bar? Thanks for the tutorial again! πŸ™‚

    Reply
  3. Claire on

    Thank you for all of your tips! I’m new to blogging and I’m trying to make my blog look more professional – I can’t wait to create a drop down menu! Your posts are so helpful – I can’t thank you enough! πŸ™‚

    Reply
    • Ellie M on

      Hello, what issue are you having? Are you trying to apply it to your current menu? It’s using a pages gadget, which is can’t be applied to. You need to create a HTML/Javascript gadget as shown and add the menu code there.

      Reply
    • Ellie M on

      Hello. If you want to change the different elements using Bloggers Template Designer you must keep the special code in place. For example in your template for the first part you have the following

      #cssnav {
      text-align: center;
      border: 0px;
      margin: 0px;
      padding: 0px;
      width: auto;
      font: $(font-size:40px;);
      color: $(font-color:#000000;);
      }

      The part in pink needs to be font: $(tabs.font); color: $(tabs.text.color); if you want to change the font and colour using the Template Designer. Otherwise it should be font-size:40px; font-color:#000000;. Hope this helps!

      Reply
    • Ellie M on

      Oh! Also, change float: center; back to float:left; under #cssnav li so that the menu appears in one line instead of each link appearing one under another πŸ™‚

      Reply
      • Adele on

        Alright, I think I got it πŸ™‚ Thank youuuuu!

        Another question, I’m having trouble centering the whole menu. It aligns left and I’m not really sure how to fix it.

        Reply
        • Ellie M on

          The reason you’re having trouble with it is because the navigation is centred and the rest of your content is slightly offset. You’ll see what I mean in this image here – the light grey area is your main content area and the dark grey is your blog post area. To centre your header go into the HTML/Javascript gadget that you are using for your header and instead of wrapping it in <center>...</center> use <div id="headimg">...</div>. The add the following to your CSS #headimg { margin-left: -50px; }. You may want to make your post content area larger as at the moment the images are overflowing, this will become obvious when you add text to the posts as shown in the above image. Hope this helps πŸ™‚ xx

          Reply
  4. sheena on

    hello! your blog is awesome! was wondering if you could help me with drop down menus for a custom pages header. I created the pages tabs with pictures and would like a matching drop down menu for some of those tabs. Is that possible and if so, how?? if you need to see it, here is the blog, http://beautyandbibs.blogspot.com/ Thanks in advance!

    Reply
  5. Elizabeth on

    Hi,

    I’m starting a beauty blog in my country and wanted to have a clean organized feel to it. I’m still in the beginning stages of design, but this tutorial was awesome! you absolutely rock! I will definitely keep using your tutorials.

    Reply
  6. Kelsie on

    First of all, thank you your a saviour! Your tutorials are so helpful!

    I have done this and have got the navigation, but I don’t want it to drop down I just want to be able to click on ‘Contact’ for example and be taken straight onto my contact page, how do I do this because at the minute when i click on it it just says, ‘Sorry, the page you were looking for in this blog does not exist.’

    Please help πŸ™

    Thank you! x

    Reply
    • Ellie M on

      Sounds like you’re using the wrong URL which is why it can’t be found. Go into pages and click view contact page. Use that URL for the contact link. To remove the drop down feature just take out the sub-menu section so the <ul> <li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 1A</a></li> <li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 1B</a></li> </ul> part in between πŸ™‚

      Reply
  7. Tina on

    Thank you so much for this tutorial. It was what I’ve been searching for πŸ™‚ It worked perfectly too. I am just wondering will the drop down menu work on phones as well? Or is it compatible only with computers?

    Thanks again!

    Reply
  8. Sierra on

    Hello!

    Thank you so much for this! You have been a God-send! I got mostly everything together but seem to be having trouble with the sub-menu. It won’t let me hover to pick a category. Instead, it disappears as soon as I try to select something. Can you help me?

    Reply
  9. Whitney on

    Thanks so much for all your tutorials!

    I’m having a problem centering my drop down menu on my test website, thewitedit.blogspot.com. I tried following some of the comments above, but can’t seem to get it right.

    Thanks for your help!

    Reply
  10. Lipstickholic on

    Hey there… thanks for this tutorial…I m new to blogging world and don’t know much about CSS and HTML codes. This helped me add a drop down menu to the blog easily. Can u plz guide me how can I add any border around each category. I want to have a margin or a border around every menu category and also the same for the sub-menu.. This will make the menu look clearer and better…

    Reply
  11. Lucy on

    I need help centering the drop down menu. I tried finding ‘.tabs .widget li, .tabs .widget li’ but I couldn’t find it! HELP NEEDED!

    Reply
  12. Lady Jewels Diva on

    I’ve tried doing this many times and it either doesn’t drop down or the sub categories go sideways.

    I’m not sure what else to do. I have removed the html gadget while trying to sort this out so I have the normal page widget still in place.

    The CSS code is still exactly as you wrote it.

    Any ideas?

    Reply
  13. Em on

    Hi Ellie!
    I have been reading your blog all day…it is fabulous! Thank you so much for the tutorials.
    I am trying to makeover my blog and add a drop down menu. Everything is installed, but the submenus are not folding up.
    Is there anything I can try?? This is driving me crazzzzzzy :0)

    Reply
    • Ellie M on

      Hello Em, thank you so much. It looks like the CSS isn’t being read properly. Go to Template > Edit HTML and find the code .post-title {text-align:center;} which above the CSS for circular date /* Date Style */. Before .post-title {text-align:center;} add a closing bracket } for the previous code. This error could be prevent the browser from reading other CSS. Let me know how you get on and we can go from there πŸ™‚

      Reply
  14. Lady Jewels Diva on

    I’m adding the first section to the html, and the second section to the CSS in the customise template section, although every time I go to check it it seems to have disappeared, so now I’m checking the template’s html to see if it’s there and so far, from what I can understand, it isn’t there either. I’ve got an Awesome template.

    Reply
  15. Charlie on

    Do you have a tutorial for adding a sub-sub menu? I now have 2 styles of dolls and I would like to have a menu come off of doll making that would allow you to select either Nancy or Lila instead of a page with everyting mixed together. Thank you!!!

    Reply
  16. Lady Jewels Diva on

    Hey Ellie,

    just wondering, if I change my domain url in the Blogger dash, will that effect all of these page links in the menu, will I have to change them all, and will changing them effect the menu in it’s css or html?

    Reply
    • Ellie M on

      Yes and no – Blogger redirects your old url to your custom one so the navigation links should redirect also. However, it would be better to change them as the page will load faster. Won’t effect the menu if you just change the URL’s.

      Reply
  17. dewaanifordrama on

    Thanks for your clear coding and great tutorial! I completed all the steps, but once I had added the CSS then the drop-downs disappeared…I have some before and after screenshots, but I don’t think I can add them to the comment here. I was wondering if there was a chance you might be able to figure out the coding. I’m rather new i.e. a total newb as far as coding goes. Thanks so much!

    Ellie, I think you might deleted my last comment…I promise I am not a spammer. I really need help! Yours has been the best tutorial that I have found so far, but I can’t quite get the drop-downs to work. Once I add the CSS, the drop-downs disappear, and I don’t know if it’s just an issue with the Blogger template I’m using or if it’s something wrong with the code. Any help would be much appreciated!

    Reply
    • Ellie M on

      Hello! Apologies – I’ve not deleted your comment, I was busy with college work and have been quite unwell. I can’t really tell the problem right now since the code and CSS isn’t installed. If you add them again, I can check the code and see whats wrong.

      Reply
      • dewaanifordrama on

        I am so sorry Ellie! I didn’t mean to be rude. I hope you feel better soon, and I totally understand about being busy with school. I will install the code again ASAP. I think what I am doing wrong is not being more specific with the CSS…but I am a total beginner with coding…

        Reply
  18. Oreo on

    Hi Ellie, I discovered your site recently and I love it, your tutorials are great, very detailed and helped me a lot to build my blog. Now I have a question, I use your menu on my blog but now I would like to improve it with a third level or a sub-sub category. It drives me crazy I tried a hundred things and cannot do what I want. Do you have any tips on how to add a third level ? Thanks in advance you’re awesome !

    Reply
  19. Mikki on

    Hi Ellie

    First off – many thanks for this! It is by far the most simple tutorial for drop down menus πŸ™‚

    Just a few questions:

    1. Can I get rid of the indent so that the menu is aligned with the header? I’m sure it has something to do with me expanding the width of the posts..

    2. How can make the menu a little higher/closer to the header?

    3. How can I decrease the gap between the sub categories? I’ve noticed the wider the space I leave between the menu and the post, the wider the gaps within the sub categories get.

    Thanks!!

    Reply
    • Ellie M on

      Hello. Go to Template > Edit HTML > Find </b:skin> and add .section, .tabs-inner { margin: 0px; padding: 0px; } to remove the indent. That extra space is coming from your header so find/add .header-inner .Header .descriptionwrapper and change margin-bottom: 25px; to margin-bottom: 0px;. To remove more find .Header h1 and change margin-bottom:10px; to margin-bottom:0px;. Finally remove height: 60px; from #cssnav li

      Reply
  20. Casey on

    Hi Ellie,
    Is there a way to add more than just the one sub category in the drop down menu? For instance …
    CATEGORY 1
    SUB CATEGORY 1A
    SUB CATEGORY 1AA
    SUB CATEGORY 1B
    SUB CATEGORY 1BB

    Reply
  21. Chelsea on

    I’m having some troubles. When I put in the above code into Add CSS: then I get a blogger image broken, saying “Whoops, that’s an error.” The menu still shows up on my page, but it is missing two of the dropdown sub menus – Design Galleries should have 3 menu items. I’ve tried redoing it multiple times, when I remove the CSS code then the google error goes way, when I add it back in the error message comes up. Any thoughts? I also have code in there to remove the borders around pictures that you gave… is there someway I need to separate those? One other question: I’ve read through all the comments, and am confused, how do I center the menu items under my header? Thank you and I am LOVING your blog and all the help you have given to me in getting my website almost to what I am hoping it will be!!

    Reply
    • Ellie M on

      Hello, when you add code to the ADD CSS section of the Template Designer, all it’s doing is adding it to the bottom of the CSS file in your template (Template > Edit HTML) so you can go there if you want to re-arrange them. The reason it’s not showing the full menu is because you have a max-height set. To get rid of this go to Template > Edit HTML and find .tabs-inner .widget ul in the CSS, delete the line max-height: 34px;

      Reply
      • Chelsea on

        I tried that, blogger error “Invalid variable declaration in page skin: Variable is used but not defined. Input: tabs.background.gradient” and doesn’t change anything… any thoughts?

        Reply
  22. Charlotte on

    Hello Ellie! Just want to thank you for this amazing website, all the tutorials I need are here and a lot of my blogger problems have been solved because of xomisse πŸ™‚ I just want to ask :

    How do you edit the custom css ? I don’t know which parts to edit and how to do it.

    Reply
    • Ellie M on

      Hello Charlotte. Thank you very much. For this particular tutorial or in general? If you go to Template > Edit HTML the CSS is in-between ]]> <b:skin> and ]]> </b:skin> so you edit the values (selector { property: value; }). For the tutorial above you can edit everything written in pink, the code written like $(....) can be edited in the Template Designer (Template > Customised > Advanced). Here’s a post on Bloggers CSS.

      Reply
  23. datacreata on

    Hi Ellie
    Just found you and this morning have been brave enough to back-up my template, archive my blog and picasa albums. I really would like to add drop down menus to my blog but really feel frightened about using html or CSS. As you can see, I currently have blogger’s awful dark grey page tabs which make the top of my blog look awful. I initially wanted to be able to change the colour of them but can see no way of doing this other than through code. I also think they look rubbish anyway hence the wish to create drop downs. Looking at your code just makes me want to curl up and hide rather than try. Help!

    Reply
      • datacreata on

        Hi Ellie, thanks for that. Decided in the end to put your navigation bar onto my blog. Once I got the hang of putting in my links and topics I found I got braver so many thanks for giving me the confidence to try. I have linked to your relevant ‘how to’ pages from my blog under Blog Tutorials. I hope this is okay.

        Good luck with your studies. Three years ago, I completed my BA in Fine Art so appreciate how little time you have. I am sure I will return again to try some more things!

        Reply
        • Ellie M on

          Awh I’m so happy to hear that πŸ™‚ thank you so much for sharing my tutorials also. Thank you, yes getting very busy now, excited to finish!

          Reply
  24. Rebekah on

    I can’t seem to get the sub-categories in under the category tab. They are just sitting underneath them, not in the tabs themselves. Please help…this stuff is all new to me and I am having a hard time getting it right. thank you for your help!!!

    Reply
  25. Amanda on

    I am doing a test of this header bar but my sub categories are not dropdown menus. Instead they are just sitting below the words. Could you help?

    Reply
  26. Khatie on

    Hey! Just wanted to let you know that this is a great tutorial and it really helped me with my nav bar, and now it looks great, all thanks to you! Once again, great tutorial and can’t wait for more to come to help me with future blog stuff!

    xx,
    K

    Reply
  27. Eustacia Tan on

    First, thanks for the tutorial! It was just what I was looking for!

    I have a problem – I installed the CSS, but when I hover over items in the drop down menu, the words can’t be seen. How can I fix this?

    Thanks in advance!

    Reply
  28. Caitlin on

    Hi!

    I was wondering if you could take a look at my blog and see whats wrong with my navigation bar?

    It doesn’t go the full way across my blog and I am struggling to get the text in the center.

    Thanks πŸ™‚

    Reply
        • Ellie M on

          No problem πŸ™‚ yes, find #cssnav and add margin-left: 20px; in between the brackets. Change the number to suit you. You may have to remove margin-left: 50px; from .tabs-inner .widget ul if you move the text links over too much as that will cause the social media icons to move out of place. Hope this helps!

          Reply
  29. LyrSapph on

    Great tutorial. Thank you very much. But can I add sub sub menus? Still using the Blogger Templates style. I just added you in my readers list. Thanks again πŸ˜‰

    Reply
      • Rebecca on

        Will there still please be a tutorial on this soon or have you already done one that I can’t find since the previous reply was made? I’d really love to be able to add in sub-sub categories.

        Reply
  30. Alex on

    Hi there! Thanks for the code, for starters! I tried it out on a tester blog at first and it worked perfectly, but when I added the coding to my actual blog the tabs didn’t show up in a drop down menu but in a second row of tabs. Could you possibly take a look and see what I did wrong? Thanks so much!

    Reply
  31. Ashley Nudge on

    Hi!

    I’m adding a dropdown menu and was doing great. Your tutorial is very helpful! Thanks so much for making this! But… I ran into trouble trying to make it visible and I’m stuck. I tried finding the tabs.outer code in my template and couldn’t find it.

    I’m not sure what to do next…

    Anyways, if you look on my page you’ll see at the bottom of my sidebar what I’ve added so far for the drop down menu. I’d really appreciate your guidance with what my next steps should be! I’m not super tech saavy and you seem to have been sent from the tech gods! πŸ˜‰

    Please rescue me!

    Thanks,

    Ashley

    Reply
  32. Jennifer on

    Hi Ellie
    Thank you so much for this wonderful post. It was invaluable. I’ve successfully created a very nice drop-down menu.
    One thing I would like to do however is to create sub-sub-categories. Does that make sense? A further set of menu items coming from what you have called the sub-category.

    Reply
  33. Meg on

    Hi Ellie,
    I love this tutorial! It is so easy to understand and simple to install. Thank you so much!
    I just have one quick question: would it possible to change the font of my navbar to a google font?
    I would really like it to match my post title font. My blog URL is http://www.tester-meg.com.au.
    Love,
    Meg.

    Reply
  34. Charmaine Kwok on

    Hello sweetie!!
    Thank you soo much for the tutorial!! It really helped me~
    I just have once question. Is it possible for me to add a subcategory into another subcategory??
    and if it is, do you mind please telling me how?

    Thank you!!
    Charmaine

    Reply
  35. nuwanda on

    Hello! Thanks a lot for this tutorial πŸ˜‰ I’ve been looking for a way to do this in my blog for a very looong time, and you made it very easy. (You have a wonderful blog full of resources!)

    Thanks,
    nuw

    Reply
  36. Matthew on

    Hi. Thanks for the great and simple tutorial! I just have one problem. I got the navigation bar to work on my test blog, but there are white dividing lines inbetween each tab. How do I go about getting rid of those? Thanks.

    Reply
  37. Andrea S on

    Hi! Your tutorials are UH-MAZE-ING. So easy to follow, so informative. Awesome.

    I am having one problem, though, and I have absolutely NO idea what is going wrong. The links are showing up just fine (I haven’t fine-tuned the look of them yet, so no judgy!), but they won’t drop down! The sub-categories just appear under the links. I’m sure you’ll see what I mean when you take a look at my site. Is there something I missed…? I’ve compared my codes to your original ones… and, well, I just can’t find the error. Please help! And thank you!

    UPDATED TO ADD:

    Apparently I didn’t press “ENTER” after I pasted the code into the “ADD CSS” section of Template Designer. It works now. Am feeling sheepish. :S

    Thanks again for you amazing tutorials.

    Reply
  38. heather on

    Hi and thank you so much for this great tutorial. It has really helped me. I have a question.. if I prefer not to have a hyperlink in my top level category, how do I remove it? I tried to remove the html tags for the link, but then my category title is not formatted correctly. It take some other font/style and when I try to use the template designer to change the style of the Tabs section it does not work for that one category. Heather

    Reply
  39. Lindsay on

    This is really helpful and easy to understand! I’m just having trouble installing this because of my static header. When I place this code into my Layout, it starts to create a new menu bar. What am I doing wrong?

    Thanks!

    Reply
  40. Sasha on

    Hi Ellie,

    Thank you so much for this tutorial!
    I spent few hours trying to figure out this drop-down feature for my blog with no luck… I believe it’s because I’m trying to add the sub categories to my already existing fixed navbar.
    Any advice on adding code to a pre-existing navi would be so incredibly appreciated!

    Also, I would loooove to see a Popular Post widget customization such as the grid design tutorial in the future! πŸ˜‰

    Thank you again!

    Reply
    • Elaine M on

      Once you add the subcategories, you’d have to alter the CSS above to represent the IDs and Classes that are used on your current navigation. Sure thing, will write that down!

      Reply
  41. Jana on

    I love this tutorial and I refer to it often! I’m just wondering–is there a way to make this navigation bar mobile responsive? Is that a tutorial you might consider writing in the near future?

    Reply
      • Caitlin Moore on

        Thank you so much for this awesome tutorial! So much easier to understand than a lot of other tutorials!
        I’m looking forward to the next one you mentioned-am I right in assuming it shows us how to make our drop down menu show up in the mobile versions of our blogs? I desperately need this!
        Keep up the good work- you are awesome!

        Reply
          • Sherrie on

            Hi,

            I was wondering if you were still going to do the tutorial for a drop down menu that works on mobile devices? I have tried so many tutorials for dropdowns and t hen when I eventually found one or two that worked, I realized they didn’t work on mobiles? Thanks for the tutorials for Blogger, I have picked up several neat things to customize my blog with from here! They are appreciated.

          • Elaine M on

            Hello Sherrie. Thank you! Yes I do still plan to do a tutorial on it, just trying to get something that will work with most templates so people can easily customise it to suit them. If you do some tweaking and choose custom mobile template they will work πŸ™‚

  42. Miranda on

    Hi! Everything is working great for me, but I was wondering if you could tell me where to place “opacity”, because I’m trying to get JUST the drop down background to be slightly transparent. I don’t want the text transparent though πŸ™‚ Oh and I was wondering if you knew how to code so that the navigation is in all caps and the drop down menu items are in lowercase!

    Thank you! Your page is immensely helpful.

    Miranda

    Reply
    • Elaine M on

      Hello Miranda, thank you very much. Apply the opacity to #cssnav or wrap the list in a div and apply the opacity to that. Apply text-transform: uppercase; to #cssnav li a and text-transform: lowercase; to #cssnav li ul a.

      Reply
  43. Alice on

    Hello Elaine! I’ve been wandering around your blog adding a lot of things to mine using your tutorials, it’s incredible how you take the time to answer to each and every one of the people’s questions, that’s what I call real commitment! You’re truly awesome.

    I was wondering if you could help me with a little problem… I want to add a bit more space between each of the different navigation bar links, they look very close alltogether, thanks a lot!

    Reply
    • Elaine M on

      Hello Alice, thank you so much. I’m a little behind with replying to comments at the moment but I’m getting there now πŸ™‚ To add some space between the links add padding: 5px; to #cssnav li a in your template.

      Reply
  44. Maria on

    Hey!
    So i’m working my way through many of your tutorials – they are absolutely amazing!
    The blog is still a work in progress and i’m not great at code… but i’m having problems with the drop down menu part that I can’t seem to fix myself.

    I have 4 subcategories, but I can only hover over and select two of them, below that the menu disappears as if it is unselected? And also, when the I scroll down and it changes to a sticky menu bar, only the first subcategory displays – any advice?

    Thanks, M x

    Reply
    • Elaine M on

      Hello Maria. Thank you so much! Have you tried the steps under “DROPDOWN MENU NOT VISIBLE” above. There are a few errors in your template that might also be causing a problem.

      Reply
  45. Lizzie on

    Hiya… please would you help me?

    I have appiled the codes and its basically worked but instead of all my tabs being beside each other some of them have gone under each other? I have tried playing around to sort it but no luck and now i have this coding (.tabs-inner { padding: 0px; } .section { margin: 0px; } .content-inner { padding: 10px 0px; }) at the top of my page for everyone to see and I dont no why?

    please help πŸ™ xx

    Reply
    • Elaine M on

      Hello, the coding is appearing at the top of your page because it is located in the wrong place in your template. This or another error could also be the reason for the pages not displaying properly. The gadget could also be in the wrong place, check the end of the tutorial for a fix.

      Reply
  46. Ana on

    Hi! Thanks so much for your tutorials, they have been really helpful! but I have problems with my navigation menu: I don’t know why the changes I apply in Template Designer won’t work on the actual website and the same thing happens to Blog Tittle.

    Thank you so much in advance!!!!

    Reply
    • Elaine M on

      Hey Ana, if you’re using a custom template it may not have the code for the Template Designer defined, you’ll see them under Variable definitions at the top of your CSS. If you aren’t using a custom template make sure there’s no errors in your CSS (between <b:skin> ... </b:skin>) like extra / missing characters.

      Reply
      • Ana on

        Thanks! Yes, I realized im using custom template:( can I some how fix that? (variable definitions) because the Post Title used to work with the font i’ve chosen in the template designer, but then it turned to times new roman

        Reply
        • Elaine M on

          Hey Ana, okay so a couple of things. It says you’re using a Blogger template not a custom one so it’s likely that there is a error or something is being overridden rather than it being missing code. It also says that the Post Title is set to Arial in the Template Designer with no custom value added so double check that the page is properly saving once you’ve selected the font there. In Template > Edit HTML, find h3.post-title, .comments h4 and make sure the value for font is $(post.title.font). You also have a lot of duplicate code in your CSS that should be cleaned up and an extra bracket at the end of it, that should be removed. Hope this helps!

          Reply
          • Ana on

            THANK YOU SOOO MUCH!!!!!! THIS HELPED A LOT

            But now I have a problem with search box, I added the code to the navigation menu widget and the searchbar is located higher than navigation menu.
            Is there a way I can also locate the menu to the right and searbox to the left?
            Thank you in advance!! I hope I’m not bothering you too much!

          • Elaine M on

            Hey Ana, you can adjust the position of the search bar with a padding or margin value. It’s usually due to other coding on your site but that will adjust it. Yeah you can use the same technique used in this tutorial to position one element on the left and the other on the right.

  47. S. on

    Thank you so very much! Indeed I was able to bring the drop down menu in my blog and it looks fabulous! Computers and I have barely no relation and for me everything looks like mumbo jumbo but you so fabulously described everything that even a no-comp-knowledge could get the drop down menu for my blogs! Thanks a ton! Seriously πŸ˜€ πŸ˜€ πŸ˜€ πŸ˜€ πŸ˜€ πŸ˜€ πŸ˜€

    Reply
  48. mayar on

    Hello Elaine,
    I love your blog template so much, it’s clean and catchy, I love your posts & tips and tutorials too..
    I think I’ll read each post on your blog today :’D
    Thank you.

    Reply
  49. Stephanie on

    Hi! I love your tutorials and I am using this one to redo my site. When I put in the categories and have the drop down working, I cannot seem to center them. Any trick to make it work?

    Reply
  50. wildflower on

    hello πŸ˜€ I tried this out and the CSS part didn’t work :/ instead of drop downs the tabs are horizontal. Please check out my blog (fangirlic.blogspot.com) and tell me what I did wrong please?

    Reply
  51. Charlotte Everaert on

    Hi Ellie!
    First of all, thanks for all your tutorials, they’ve been super helpful and made my blog really pretty!
    I have a question for you: I’ve already created a menu on top of my blog (http://www.aliceroxy.com/), with the help of one of your tutorials. I was wondering if I should create a new one in order to have a dropdown menu included? I would like to cluster my blog categories (style stories/label love/city gal). xo Charlotte

    Reply
    • Elaine M on

      Hello Charlotte, thank you so much! Your current menu is using the Pages gadget, this gadget cannot have dropdown items. You’ll need to create a custom navigation (like the one shown above) in order to have dropdown items.

      Reply
      • Charlotte Everaert on

        Ok, thanks a lot! πŸ™‚ I was thinking the same thing.
        Is it possible to make custom the nav bar and then make it stick at the top when scrolling? Because I did that with my Pages bar and really liked the effect.

        Also, I’d like to use the Futura font for my nav bar but it’s not available on Google Fonts. Do you have a quick fix for that?

        xxx

        Reply
  52. Julia Kim on

    Hi ELane! I have another question:
    Just like on your misse blog, how to do keep the dropdown labels straight when hovering over them? They always shift a little bit every time it is hovered over. Thanks!

    Reply
    • Elaine M on

      Hello Julia, it’s likely a border value (possibly white or transparent) on Blogger tabs or a conflict of padding values. Try removing the borders on .tabs-inner .widget li a

      Reply
  53. STacey on

    Hi i have just discovered your site and have been reading through all the amazing tutorials you have done for everyone. Thank you for spending your time creating something which allows us to better our blogs too. I have just spent a couple of hours creating a dropdown navigation bar and cannot seem to get the dropdown categories to appear. I have tried the code under ‘dropdown menu not visible’ and placed it in the corrent place, i think? but i cannot seem to make them appear. Do you have any suggestions?

    Reply
  54. M on

    Hi Ms. Ellie! I’ve been searching the internet on how to add a drop down on a post to show more text just like your IMPORTANT TO NOTE (CLICK TO READ) part. If you don’t mind, can you help me how it is done? Thank you!! πŸ™‚

    Reply
  55. Max on

    Hi, God bless youuuuuuuuu for this wonderful tutorial. I know nothing about CSS and HTMLs but I’ve been able to create a drop down menu for my blog thanks to your tutorials. I have a couple of challenges though: 1. The tabs I created for my menu are ten but only five appears in the menu. How can I get the rest to appear? 2. How do I change the background n font color of my drop down box (sub-categories menu) to make it different from the color of the main tabs menu? 3. How do I create a third sub-category (like sub sub-category)? Thanks for your help in advance.

    Reply
  56. Hope Sloper on

    I love your tutorials. This one was so easy to do and everything went flawless. Is there a way to make more of a space between the navigation bar and the content area? It seems like the date of the post is right below the navigation bar. I have such a pretty navigation bar thanks to you, I’d like to give it some space.

    Reply
  57. Gen on

    Hi ellie!
    Just tried this tutorial and it messes up the whole blog and the navbar that shows up isnt horizontal (it’s more of a list with only some of the links working, the rest are just text). Not sure what I’m doing wrong?

    Thanks!

    Reply
  58. Prakash on

    Hi,
    Tonnes of thanks for the perfect codes that eventually made the dropdown work in the (awesome inc) template. After completing, I have two issues, where I need your professional help please..
    1) I noticed that moving/hovering the cursor from the main link to sub link is too difficult and it works only from a particular position on the main page link. I am unable to figure out why. (please bear with me if I am silly πŸ™‚
    2) I am unable to change the tab colour and the background colour of the SELECTED page. For hover, I have set the tab colour as white (#ffffff) and background as grey (#888888). I want to remain that way upon selecting a tab, so that it is obvious of the landed page.

    Please help…

    Reply
    • Elaine Malone on

      Hello Prakash, have a look at the end of the post for the solution to your first issue. In order to highlight the selected page you’ll need to add a script to add a class to the selected page, then use CSS to add styling to that class. I don’t have a tutorial on this at the moment.

      Reply
  59. Heather on

    Hi Elaine,

    I love your tutorials, their extremely helpful and easy to understand. I pre-customized my tabs for pages to work in a color scheme before I did your drop down menu tutorial and after adding all the code everything worked perfectly. However, I would like to change how the drop down background is white to the colour of the nav bar but I can’t figure out how to do it. If you could please tell me how to change it, I would be forever greatful!!

    Thanks in advance,
    Heather

    Reply
  60. Tashika Bailey on

    I’ve tried your method to create dropdown menus but theres a problem.
    The sub-menus doesn’t collapse under the main categories, instead they’re spread out over the menu bar which looks messy and unprofessional.
    Would you be able to help me with this problem please, I’ll see if I can send you a screenshot of the problem or something because I’m going to change my menu bar to how it was before. I’m going to save the code as It is now so i’ll be able to re-do it quickly..

    Reply
  61. Emily on

    Hiya, I love your tutorials but this hasn’t seemed to work. The drop down options are just in line underneath.

    Any idea what has gone wrong here?

    X

    Reply
    • Elaine M on

      Hello. It’s an issue with your CSS which is stopping the above CSS from being read correctly – possibly an extra / missing character, incorrect nesting, different selectors, etc. Go to Template > Edit HTML and clean up the CSS section.

      Reply
  62. Siena on

    Hi Elaine,
    I love, love, love your tutorials. They’re so easy to understand and I wouldn’t know what to do without them. Kudos to you!!!
    I was able to add the dropdown menu and more but I’m wondering how can I change the font size of my dropdown menu?

    Please help.

    Siena

    Reply
    • Elaine M on

      Hello. Thank you so much πŸ™‚ so glad you find them helpful. You should be able to alter it in Template > Customise > Advanced > Tabs… but to do so manually you can add font-size: 10px; to #cssnav li a in your CSS.

      Reply
  63. Lu Ann on

    Thanks so much for your awesome tutorials! I’ve installed the drop down menu nav. I was just wondering if its possible to create a coloured bar behind it that matches the colour of the drop down menu backgrounds?

    Reply
  64. Rachel S on

    Thank you so much for this tutorial – the only one I found that is actually helpful! However, I have one problem. When I hover over the drop down menu, the sub-categories disappear before I have a chance to click on them. Any idea how to fix this ?

    Reply
  65. Doveranalyst on

    Hey, thankyou so much for this. Love the fact that we can change the colors as and when we want. I wish it was floating though. Is there a way we can do that? Also, is it possible to have sub categories of the child from the parent?

    Reply
    • Elaine Malone on

      Hi Laura. With this tutorial, depending on your template, you should be able to change it in the template designer in Theme > Customise > Advanced. Otherwise you can manually change it by editing the value of color from color: $(tabs.text.color); to color: #000000;.

      Reply
  66. Mackenzie on

    Hi, I tried your code and it’s great! But after fooling around with style, my sub-menu has a weird block on the left side when you hover. How to I fix this?

    Reply
    • Elaine Malone on

      Hi Jaye, the blog shouldn’t be affected by CSS. Make sure you’re adding it to the right place. If you’re using a premade/custom theme you may have to manually replace the variable code from the above CSS (those where the comments say Template Designer) as this is what the default themes use in the customise theme designer and your premade/custom theme may not support this.

      Reply
  67. Kim on

    Thank you so much for your tutorials! I did this a while ago, but the one thing I cannot change is when my subcategories drop down, there is a black line (a border line) on the bottom of the drop down box (not on the sides) and I cannot figure out how to make it white. Any help would be greatly appreciated! πŸ™‚ Thanks so much.

    Reply