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

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.

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

Post last updated:

243 responses to “Add a drop down menu that can be styled with template designer on Blogger”

  1. Working on this one right now Ellie! I’ll let you know how it turns out!! Thanks for the tutorial!

    1. It worked! Question though. I’d like to further separate the nav menu with a top and bottom border, just a thin line maybe. How do I do that?

      1. Hello lovely, how are you? Add the following code to #cssnav

        border-top: 1px solid #HEXCOLOR; border-bottom: 1px solid #HEXCOLOR;

        1. 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.

  2. lisa

    This does not work, followed it exactly and there is no drop down appearing.

    1. Hello Lisa, What’s you URL? I’ll need it to check your code

  3. There are bullet points that appear in between each category. How do I get them to go away?

    1. Add list-style: none; to #cssnav li 🙂

  4. 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

    1. Thank you for the nice comment, glad you liked it! x

  5. Your code is so easy to read! I love it!!! Thank you! I will be a new follower and will update you when I have it in use.

    1. Awh thank you! Yes, please let me know how you get on 🙂

      1. I am so happy with my blog menu! Thanks so much!!! You are amazing! Charlie
        @pickledokra.blogspot.com

        1. Awh I’m glad you like it! Thank you so much 🙂 x

  6. Sarah

    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! 🙂

    1. Hello, yes you can! Just merge the above tutorial with this one – http://xomisse.com/blog/tutorial-create-a-horizontal-navigation-menu-with-images-on-blogger/ so instead of putting in the category title you are putting in the code for an image. Does that make sense?

  7. 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! 🙂

    1. Awh thank you Claire, so glad you like my blog 🙂

  8. after try and error with your drop down menu instruction , i still unable to do out drop down menu. can you help me out. thank you

    1. 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.

  9. Hi Ellie,

    I just installed this and I am loving it. However, I wanted to center the tabs and I am having difficulty with the code. Can you please help?

    http://www.babymamajuice.com

    xo,
    Sara

    P.S. Love love your blog! You have a real talent!

    1. Hello Sara. Thank you so much, that’s so kind! Find .tabs .widget li, .tabs .widget li in Template > Edit HTML. Add display: inline-block; float: none !important; between the brackets.

      1. Thank you but I couldn’t find .tabs .widget li, .tabs .widget li in the template {html}. I tried inserting the code in a few place, but it made no difference.

        1. If it’s not already in your template then add #cssnav, .tabs .widget li, .tabs .widget li { display: inline-block; float: none !important; } before ]]> </b:skin> in Template > Edit HTML 🙂

          1. sorry when I added it, it made caused the drop down menu to center instead of working like a drop down menu.

          2. Ah okay, sorry! Add text-align: center; to #cssnav and add #cssnav li { display: inline-block; float: none; }. That should solve it.

  10. This might sound a bit silly, but I am having trouble changing the colors on the dropdown menu >.< Please help!

    1. 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!

    2. 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 🙂

      1. 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.

        1. 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

          1. Yes I just realized how off it was after I wrote that comment, lol. This helps alot! Thank you so much 😀

          2. No problem, happy to help 🙂 x

  11. sheena

    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!

    1. Yes, just take what you have and combine it with this tutorial – http://xomisse.com/blog/create-a-drop-down-navigation-menu/ or the one above. Instead of <a href='LINK'>PAGE TITLEA</a> use the code you have <a href='LINK'><img src="IMAGE URL" width="WIDTH" alt="DESCRIPTION" height="HEIGHT"></a>

  12. 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.

    1. Hello Elizabeth, thank you 🙂 glad you liked the tutorial and welcome to blogging!

  13. 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

    1. 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 🙂

  14. Tina

    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!

    1. It should work on phones also 🙂

  15. 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?

    1. Hello, Find #NavMenu in Template > Edit HTML and remove height:40px; from between the brackets. It’s from the previous drop down tutorial and is needed for it but not for this one so removing it should solve your problem 🙂

      1. Thank you so much! It works perfectly now. You’re amazing.

  16. 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!

    1. Hello. Find #cssnav in Template > Edit HTML and add text-align: center; between the bracket, then find #cssnav li and add display: inline-block; float: none;. That should centre it 🙂

      1. Perfect!

        Also, how do you get rid of the spacers in between? the little | looking things?

        Thanks again!!

        1. Find .tabs-inner .widget li a and change border-left and border-right to border-left: 0px solid #ffffff; border-right: 0px solid #ffffff; 🙂 no problem! x

          1. Hi! This is so amazing! I was actually wondering how to put this “|” or “/” in between the navigations.

            Thanks!

          2. Hello, you can use something like #cssnav li:before {content: "|"; padding: 0 10px;} #cssnav li:first-child:before {content: "";}. Adjust padding values as necessary.

  17. 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…

    1. Find #cssnav li in Template > Edit HTML and add border: 1px solid #ffffff;

  18. Lucy

    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!

    1. If you can’t find it, just add the code /* Centre Navigation */ .tabs .widget li, .tabs .widget li{ display: inline !important; float: none !important;} above ]]> </b:skin> 🙂

      1. Lucy

        Yes, but I can’t find the code ‘]]> ‘! Sorry for being a pain!

        1. Oh okay. Check out this post, it will explain how to find and an alternative way to adding CSS to your Blogger Template.

          1. Lucy

            Could you use the ‘Advanced CSS’ section to center it?

          2. Yes, adding code to the Advanced CSS in Template Designer will add it above ]]> </b:skin> in your template, but you should really try find that section in Template > Edit HTML if you are going to be making a lot of changes because the Advanced CSS can add duplicates and you can’t edit pre-existing code from there.

          3. Lucy

            Aah! When I did it in the Advanced CSS section everything was centered individual one on top of the over.

          4. What is your URL and I will take a look at your code?

  19. I’ve tried so many different tutorials for this but this is the ONLY ONE that worked! I can’t thank you enough!

    Alicia

    1. Awh I’m happy to help! Merry Christmas 🙂

  20. 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?

    1. Could be conflicting with other code. If you re-add the code, I’ll be able to check the issue 🙂

      1. Done it and it’s still the same, it goes sideways. And on a side note, will the pages they drop down from still be able to be clicked on and viewed?

        1. You don’t seem to have any of the CSS code from above in your template? It’s needed for the drop down effect. And yes, as long as you add the link, they can be clicked.

          1. I’ve added everything that was there, the cod is in the CSS section, I posted as was unless there’s something I missed.

          2. Then there appears to be an issue with your template as it’s not showing in your source code. How are you adding the CSS – Are you adding it to the Template Designer or to the HTML Editor?

  21. I wish to thank you for your great tutorials. I managed to add a drop down menu, even though Im no expert in the matter. 😉

  22. 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)

    1. 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 🙂

  23. 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.

    1. Okay, we’ll try adding it manually then. Go to Template > Edit HTML and find ]]> </b:skin>. Add the CSS directly above it and save.

      1. Great! That sorted out the shape of the menu but the pages still don’t drop down.

        1. Okay, I can see it but there’s something conflicting with it. If you add ****@gmail.com to Blogger Permissions in Settings, I can take a closer look for you 🙂

          1. Perfect, now go back to Blogger Permissions and change author to admin beside my name. This gives me access to your template and I’ll have a look right away.

          2. The css was in the wrong place, it was above ]]> <b:template> and not ]]> </b:skin>. I downloaded a backup of your template and uploaded it to a testing site, the template has a couple of errors. The only thing to do to really solve those is to revert it to the original template unless you want to go through the entire template manually. I did fix the issue of the navigation though so it now shows the drop down 🙂

          3. Thanks so much for all of that! I’m not really surprised there’s issues, I’ve added and deleted so much over the last five years there was bound to be a few things going on.

          4. No problem 🙂 ah I know, I’m constantly changing things on my blogs lol

  24. 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!!!

  25. 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?

    1. 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.

  26. Super helpful tips! Have been searching for a perfect tip on how to add drop down menu to my blog. This is exactly what I needed. Thank you so much!

  27. 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!

    1. 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.

      1. 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…

        1. Oh I didn’t think you were rude at all, I just didn’t want you to think I was ignoring you 🙂 Add it exactly as shown and then I can help!

          1. I have added it how you suggested…but somehow, something is going wrong…

          2. Perfect! Can see the problem now. Go to template > Edit HTML. Find .tabs-outer between <b:skin> and </b:skin> and change overflow: hidden; to overflow: visible; between the brackets. You’ll need to alter the background/font colour as right now they are the same, but the drop down will be visible 🙂

          3. Perfect! Thanks so much! That worked! Now I just need to work on adjusting the colour 😀

  28. 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 !

  29. 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!!

    1. 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

      1. Thank you so much!

  30. Casey

    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

    1. I have a tutorial on this coming up 🙂

  31. super helpful thank you so much! i wanted to tab links to have transition and it seems to work without creating a whole new nav!

  32. Chelsea

    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!!

    1. 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;

      1. Chelsea

        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?

        1. Sounds like a different error as we’re not altering anything related to that. Add ****@gmail.com to your blog permissions under settings and I’ll fix it.

  33. 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.

    1. 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.

  34. 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!

    1. Hello, you should be able to change the colour of the tabs in the Template Designer (Template > Customise > Advanced). I offer a support service here where I can instal it for you, if you would rather not mess with code yourself.

      1. 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!

        1. 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!

  35. I did all the coding and it did not show up as a drop down menu. Words are just kinda all over the place. How can I fix that? Thanks!

    1. Sounds like an issue with the CSS, make sure there’s no errors otherwise the code won’t be read properly.

  36. 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!!!

    1. Hello. I don’t see any navigation on your current blog, are you using a test site?

  37. 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?

    1. Hello, you’ve not added the CSS which is what makes it a drop down.

  38. 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

    1. Awh thank you very much!

  39. 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!

    1. Hello, check the steps under the heading “DROPDOWN MENU NOT VISIBLE”, this should solve the problem 🙂

      1. I’ve gotten it to work, thanks so much! (I think the problem was that I customised my tabs before that, which somehow interfered with this one)

  40. 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 🙂

    1. Hello, find #navigationbar and change width: 90%; to width: 100%; 🙂

      1. Ah yes! That worked, thanks heaps <3

        Is there anyway to move the text more into the center of the bar?

        1. 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!

  41. 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 😉

    1. You can by slightly manipulating the HTML/CSS, but I’ll be doing a properly tutorial on this soon. Thank you 🙂

      1. 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.

  42. 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!

    1. Hello. It’s probably a problem with your CSS, since it’s not reading the styling the the navigation. Just had a look through your code and you’re missing a closing bracket before /* ----- CSS Nav Menu Styling ----- */ #cssnav { ... 🙂

      1. That was it! Thanks so much for your help! 🙂

        1. Sorry to bug you again, but how do I adjust the navbar so that it’s the same width as my header?

          1. Hello, step 7 in this tutorial will show you how to remove that gap 🙂

  43. 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

    1. If you can’t find it, just add .tabs-outer {overflow: visible;} to the end of your CSS, it will overwrite the other code.

  44. 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.

  45. 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.

    1. Yes of course, just add the font name to the CSS as shown here in step 6 replacing font: $(tabs.font);.

  46. 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

  47. 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

  48. 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.

    1. Find .tabs-inner .widget li a and change the border values to border-left: 0px solid #ffffff; border-right: 0px solid #ffffff;

  49. 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.

  50. 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

    1. You can use a space or a # between the quotes in place of the URL.

  51. 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!

    1. Hello Lindsay, I’m not sure what you mean? This tutorial should result in a new menu, unless you integrate it with another HTML gadget.

  52. 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!

    1. 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!

  53. Jana

    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?

    1. Hello, it’s a tutorial coming up 🙂

      1. 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!

        1. Thank you 🙂 Yeah I’ll be doing one for Bloggers mobile version and one for responsive design.

          1. 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.

          2. 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 🙂

  54. 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

    1. 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.

  55. 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!

    1. 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.

  56. 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

    1. 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.

  57. hi i dont want a drop down menu, i downloaded a theme that had drop down menu but i dunno how to remove it, can you help? my blog is http://www.mstomie.blogspot.com

    1. Hello, check your template code for nav / navigation and look for the list subitems. I’d recommend asking the original designer / developer.

  58. 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

    1. 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.

  59. Ana

    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!!!!

    1. 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.

      1. 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

        1. 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!

          1. 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!

          2. 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.

  60. 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 😀 😀 😀 😀 😀 😀 😀

    1. Glad it worked for you 🙂

  61. 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.

    1. Hello, thank you so much. I really appreciate that 🙂

  62. Hello, Elaine!

    I have been living on your tutorials! So thank you for that. But I have a problem installing the drop down nav bar. The subcategories don’t appear as drop down elements. Have a look – http://www.lostinpattern.com/

    Brigita

    1. Hello Brigita. You seem to be missing the sub-lists in your code. The ul for subcategories is empty.

  63. 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?

    1. Hello, thank you so much Stephanie. You can center the dropdown items by adding text-align:center; to #cssnav li li

  64. 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?

    1. Hello. You don’t currently have it installed so I can’t check it for errors. If you want to redo it, I can have a look for you.

  65. 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

    1. 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.

      1. 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

        1. Of course, you’ll find a tutorial to make the custom navigation sticky or fixed here and a tutorial for adding custom fonts here.

  66. 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!

    1. 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

  67. 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?

    1. Hi Stacey, thank you so much! Just popped over to take a look for you and I see you figured it out 😀 that’s awesome. It look great!

  68. M

    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!! 🙂

    1. Hello, you can see the documentation (including an example / tutorial) on this page and this page.

      1. M

        Ahh thank you! I can’t understand a thing or rwo but I will try but thank you so much! Ill learn it!

        1. I’ll put it down as a tutorial to do okay? 🙂

          1. M

            THANK YOU THANK YOU! ! I’LL WAIT FOR IT!!

  69. 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.

  70. Hope Sloper

    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.

    1. Hello, you can increase the content areas margin values. That will add more space 🙂

  71. 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!

    1. Hey Gen, I’d need to see a live version of the code to check for errors. Is it possible to open your blog temporarily?

  72. 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…

    1. 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.

  73. 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

    1. Hey Heather. Thank you so much, so glad you like them! You can change the background values under #cssnav li ul and #cssnav li li 🙂

  74. 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..

    1. Hello, make sure the CSS is correct. That is what nests the subcategories.

  75. Hi! I’m having problems with the drop down menu. It’s not collapsing under the main menu and it’s just under it. I was wondering if you could help me? Thank you!!!

    1. Hello. You’re either missing the CSS, or the CSS isn’t being read correctly due to an error in your template.

  76. 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

    1. 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.

  77. 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

    1. 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.

      1. Siena

        Awesome!
        Thanks again. My site looks way better now!

        ~Siena

  78. 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?

    1. Yes, just change the background values in the CSS 🙂

  79. Rachel S

    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 ?

    1. Hey Rachel, thank you so much! At the end of the tutorial you’ll see a heading with “Dropdown Menu Not Visible”, the code beneath that should solve your problem. Please let me know how you get on 🙂

      1. Rachel S

        Hi Elaine, thank you so much for your reply. I have tried that code, however this still hasn’t sorted the problem 🙁

        1. What’s your URL and I’ll take a look?

          1. Rachel S

            That would be great! The url is http://www.bentalbotphotography.co.uk

          2. The code you’ve added to move the image slide up #HTML9 {margin-top: -35px;} is causing it to overlap the navigation bar, which is conflicting with the height and padding values. Change the number to about -30px instead. Even better would be to replace it with #HTML2{margin-bottom: 0;} #HTML9{margin-top: 0;} to remove the default widget margin for just those two elements.

  80. Rachel S

    I’ve just tried that and it’s perfect now! Thank you SO much for your help!!! 🙂

  81. 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?

    1. Hello. There’s a tutorial here for making it fixed or sticky. Yes, you can add a third level using the same method.

  82. Finally a tutorial that works – thank you!
    One question, how do I change the text colour from purple to black?
    Thank you!

    1. 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;.

  83. 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?

    1. Hello, I’m not seeing it at the moment but have a look at the padding values. Sounds like the padding for hover might be more than the normal state padding. Hope that helps!

      1. I figured it out! thank you!

  84. Hi I’m having some trouble with this.

    When I add the css it stops the whole site from working ? Am I going wrong somewhere?

    1. 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.

  85. 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.

    1. Hi Kim. Have a look at .tabs-inner .section:first-child ul in your CSS, that appears to have a border value.

  86. How do you make drop-down menu with social buttons and searchbar responsive on a blogger navigation bar?

    1. One way is to use media query breakpoints, there’s some information on that here.

  87. Thank you so much for the tutorial!

  88. This was awesome and super easy! Thank you so much! I am studying to be a web developer and I thought that having a site on blogger was going to hurt me but now I see that I can actually do a lot there! Right now I only have two blogs on blogger, one for my Etsy Shop and one for my Avon eStore but I eventually want to do one to showcase my portfolio for web development and have great tutorial posts like this one! 🙂

    1. Hi! Everything worked great but the menu is too close together – Home is too close to Welcome! So I added the code you mentioned in the first comment above to add the border lines in and tried changing the margin and padding but nothing happens…

  89. Cyn

    Hi!
    Love your tutorials they are so easy and clear to follow. Tried this drop down menu and love how it looks on my blogger. Just one question is there a way I could add categories to a sub-category ?

  90. Guten Tag,

    Erstmal danke für den Beitrag.
    ich habe ne Weile gesucht, bis ich ein simples Dropdown-Menü gefunden habe, dass meine vorherigen Farben übernimmt und nicht alles verstellt.

    Leider erscheint bei mir nur der erste Unterpunkt, obwohl man im Quelltext sehen kann, dass es einen weiteren gibt. Woran kann das liegen?
    Blog: https://nasch-und-bentoblog.blogspot.com/

    Mit freundlichen Grüßen
    Yamini Zouren

  91. Code for sub sub menus. I am brand new to coding and many of the changes I made were just figuring it out through trial and error. The code is most likely sloppy but it did work for me. Guide I have used https://www.w3schools.com/html/default.asp

  92. lockey

    hello, i want to say thank you so much for giving such a useful information. i just wondering why it’s still not appear on my cellphone? it’s appear on web version tho

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up you’ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.