Create a custom navigation menu with dropdown items on Blogger

How to create a custom navigation menu with drop-down items on Blogger
I’ve been getting a lot of questions this week regarding navigation so the next few posts will focus on different navigations and menus you can create for your blog. Navigation is one of the most important elements to consider when designing your blog. Todays tutorial will show you how to create a drop down navigation menu on Blogger. You can see an example of this over on Misseblog. You can completely customise this menu to suit your blog template by just editing the CSS. Leave me a comment if you use this, I’d love to see how you styled yours. Don’t forget to follow xomisse on bloglovin to stay up to date with posts.

Updated Version

This tutorial was created because many people asked how to get a menu like shown on misseblog. However, if you want a drop down menu that you can alter and customise to fit your blog design try this updated tutorial instead – simple drop down menu styled using Bloggers Template Designer.

[postwarning]

  1. Figure out your navigation. What way do you want to organise and categorise things on your blog? I use three main heading on misseblog – Fashion, Beauty & Personal. Then under these I have subcategories. I use post labels on Blogger or Categories & Tags on WordPress to categorise each blog post into each section.
  2. I suggest setting up a temporary blog and attempting this tutorial there. Download a backup of your template and upload it onto the temp blog. Once you are happy with how the menu looks, you can copy the code onto your main blog or instal the edited template.
  3. First, go to Layout > Add Gadget > HTML/Javascript on Blogger. Paste the following code and enter your details to it.
    <!-- start navmenu -->
    <div id='NavMenu'>
    <div id='NavMenuleft'>
    <ul id='nav'>
    <li><a href='LINK'>Home</a></li>
    <li><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><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 HERE -->
    </ul>
    </div>
    </div> 
    <!-- end navmenu -->
  4. To add more categories and sub-categories, continue adding this code
    <li><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>
    
  5. To add sub-categories, add this code
    <li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 1C</a></li>
  6. Your navigation may look a little crazy right now because we have yet to style it. Firstly, check out this post about how to style tabs. In that post we added/edited the tabs code to look like the following. You can change the coloured text to suit your blog.
    /* Spacing & Border of First Link in Navigation */ 
    .tabs-inner .section:first-child ul { margin-top: 0px; border: 0 solid #eeeeee; } 
    
    /* Background & Border of Navigation */ 
    .tabs-inner .widget ul { background: #FFF; border: 0px solid #eeeeee; text-align: center !important; } 
    
    /* Font, Colour & Border of Links */ 
    .tabs-inner .widget li a { font: normal normal 14px Arvo; color: #333333; border: 0px solid #ffffff; } 
    
    /* Font & Colour of Rollover Links */ 
    .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: #eeeeee; background-color: #ffffff; text-decoration: none; } 
    
    /* Centre Navigation */ 
    .tabs .widget li, .tabs .widget li{ display: inline; float: none;} 
  7. Then go to Template > Customise > Advanced > Add CSS and place the following code into the box (it will add it directly to your template just above ]]></b:skin>). You can alter a lot of this code depending on how you want it to look. Play around with it, testing different things until you are happy. The main things you may want to change are in pink, with /* comments */ to help you.
     /* ----- NAVMENU Styling ----- */
    #NavMenu {
    width: 800px; /* Change width of background */
    height: 40px; /* Change height of background */
    position: relative;
    margin: 0 auto;
    padding: 0;
    border: 0px solid black; /* Change Border Around Navigation */
    }
    
    #NavMenuleft { 
    width: 800px; /* Change width of navigation */
    float: none; 
    margin: 0 auto; 
    padding: 0; }
    
    #nav { 
    margin: 0 auto;
    padding: 0; 
    border: 0px solid black;  }
    
    #nav ul { 
    float: none; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    overflow: visible; }
    
    #nav li a, #nav li a:link, #nav li a:visited {
    color: #666666; /* Change colour of link */
    display: block;
    margin: 0;
    padding: 10px 15px 10px; /* Change spacing */
    }
    
    #nav li a:hover, #nav li a:active {
    color: #0099CC; /* Change color of text on hover over */
    margin: 0;
    padding: 10px 15px 10px; /* Change Spacing */
    text-decoration: none; /* Change to underlined or none for look when hovered over */
    }
    
    #nav li li a, #nav li li a:link, #nav li li a:visited {
    background: #ffffff;  /* Change background colour of drop down text */
    width: 150px;
    color: #333; /* Change colour of text */
    float: none;
    margin: 0;
    padding: 7px 10px; /* Change Spacing */
    }
    
    #nav li li a:hover, #nav li li a:active {
    background: #0099CC; /* background color of drop down items on hover over */
    color: #eeeeee; /* text color of drop down items on hover over */
    padding: 7px 10px; }
    
    #nav li {
    float: none; 
    display: inline-block; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    border: 0px solid black; }
    
    #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; }
    
    #nav li ul a { width: 140px; } 
    
    #nav li ul ul { margin: -32px 0 0 171px; }
    
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; } 
    
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } 
    
    #nav li:hover, #nav li.sfhover {position: static;} 
  8. Edit the CSS code until you have your menu how you want it. The coloured items are the main things to change. Border can be edited like border: NUMBERpx SOLID/DASHED/DOTTED #HEXCOLOR; for example border: 1px solid #333333; will give me a grey solid border of 1px thickness. Float gives the menu a position of either left, none or right. Change your background colour, height, width, font, etc until you are happy.

Dropdown menu not visible?

9. Go to template > Edit CSS and find .tabs-outer, change overflow: hidden; to overflow: visible; and save.

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.

create a drop down navigation menu

Related Posts

Post last updated:

269 responses to “Create a custom navigation menu with dropdown items on Blogger”

  1. I have been waiting for a tutorial like this on your blog! Can’t wait to do this on my blog! what would I do if I don’t want borders around the navigation and Can I center the navigation rather than just left or right? also how would I make the background transparent?

    Thank you! ๐Ÿ™‚

    1. border:0px solid #FFF; makes them 0 width, so they don’t show.

      background: transparent; (although making it white using #FFFFFF, the same as your blog background would probably be better)

      Making the second width half the size of the first usually centres it, although you may need to alter it a little. I explain how to centre navigation better in this post – http://xomisse.com/tutorial-create-a-basic-navigation-menu-in-blogger/. Going to update this one to make it easier to centre ๐Ÿ™‚

      1. hi! thanks for that! I finally tried to do this on my sample blog

        (http://heyantoinette.blogspot.com/)

        i love it! but now there’s a lot of space between the links! is there any way for me to lessen or remove the spaces between the links in the drop down? I decided not to do the transparent back ground, just like you said, its better with a white back ground but since there is too much space between the links, it looks weird. how do I fix that? ๐Ÿ™‚

        Thanks so much! ๐Ÿ™‚

        1. Your sample blog is private so I can’t have a look but lowering the padding number from 10px should lesson the space. You could invite me as a blog reader in settings so I can check it out for you – xomissellie(at)gmail(dot)com

          1. Oh shoot! I forgot about that one! haha! I already invited you! ๐Ÿ™‚

          2. Add background: #fff; between the brackets of #nav li ul. Then you can alter the padding in #nav li to add space or spread out the drop down items. Hope this helps, let me know if you want any more adjustments.

          3. Hi! I got it fixed finally! Thank you so much! Can I also ask, how can I make the navigation fixed? I saw some blogs where when you scroll down, the navigation remains at the top. ๐Ÿ™‚

            Thank you again! ๐Ÿ™‚

          4. I actually that tutorial going up today! ๐Ÿ™‚

          5. Oh, okay! I can’t wait! ๐Ÿ™‚

            Thank you for this again! ๐Ÿ™‚

            xx
            Sarah

          6. I got it done! Its awesome! can I ask, how would I make the back ground a little bit transparent and how can I make it cover the entire topside when it scrolls? Like the one here on your blog, mine seems to only cover until the last menu tab. If you like, you can check it out and tell me what else I can do to improve it? ๐Ÿ™‚

            Thank you so much! you are amazing! ๐Ÿ™‚

  2. Hi Can you please help me with this line? Home

    My home button is not working.

    Thank you so much for this tutorial!

    1. Sometimes the template code doesn’t work, so you can use the following instead – <li><a href='LINK'>Home</a></li>. I’ve changed the tutorial to prevent confusion in the future, thank you ๐Ÿ™‚

  3. btw, its still on my sample blog (heyantoinette.blogspot.com) I haven’t put it up yet on my actual blog. ๐Ÿ™‚

  4. Hi lovely,
    How do you make the size of the boxes in subcategory the same width. Trying out this tutorial on a test website and the width is that of the word e.g “personal style”. Thanks. x

    1. Change the width value under #nav li ul

      1. Thanks beaut. I already tried that. It just messes up everything and makes some subcategories show in 1 link instead of below each other.

        1. The width has to be longer than the word, otherwise it will look messy unless you make the font smaller. You’ve altered some of the code in the css but not in the code itself, this is why it cannot read the styling.

  5. Shari

    I’ve been working on my blog since yesterday trying to get this tutorial to work. I have great understanding of html coding and how to fix things but I absolutely can not get this to work. I got it to work once but I had to delete the styling I already had in place for my navigation bar.

    You can see my template blog here http://simplysharilynntheme1.blogspot.com/ and my real blog here http://simplysharilynn.blogspot.com/ . I’d really like to keep my navigation the way it is on the actual blog but I’d just like to add drop downs.

    Any idea of what I’m doing wrong?

    1. You don’t seem to have any of the CSS from step 7 in your template? Even with the styling that is already in place for your tabs, you still need this code for it to be a drop down menu – especially the last 5 line of code in step 7. You can remove the parts (mostly in pink) which you probably already have styled previously but the rest is needed. Hope this helps x

      1. Shari

        Nope, all the code is there, I’ve checked about 40x. Can’t figure it out at all. ๐Ÿ™

        1. Hmm, doesn’t seem to be registering it then. Where about’s did you have it and was it below the styling you already have? I notice that the menu is gone so cannot recheck your code. My advice would be to add the default drop down menu first. That way once you know it works, you can style it as you wish which won’t take long as you already know what way you want it.

  6. jacquelyn

    where do you change the font in this code? Also, how do you make it so that when you hover over it, the color stays white instead of gray?

    1. Hello. I’ve updated this code. To change the font use the code under #6 – Font, Colour & Border of Links. You can also add it to . To edit the hover over part, change the values under #7 #nav li li a:hover, #nav li li a:active {. Hope this helps x

  7. alice

    Hi love,

    I copied and pasted the first code given, however, for my second drop down tab…the sub-tabs aren’t display in a list format such as:

    Love
    Peace
    Success
    Ambition

    Instead it looks like this:

    Love Success
    Peace Ambition

    This problem did not happen with the first drop down menu. What can I do to fix this?

    1. Hello. The problem is with the width of each subnav. I’ve updated the code and added helpful comments, if you want to add the new CSS it should solve your problem.

  8. I just finished working on this at my blog, http://www.bisozozo.com. Your tutorial was a big help! Thank you. I will definitely try making and a sticky navigation , following your instructions.

  9. Thank you so much for this. I have been searching high and low for a simple drop down navigation tutorial that works! This worked. Many thanks.

  10. Hi! Thank you so much for your tutorial and for answering my question above. I have one more question – I didn’t notice this for the longest time because I browse on Chrome, but in IE (and I’m not sure about other browsers) it’s not displaying properly, the navigation menu goes down the middle of the page. Do you know how to fix this? Thanks! (It’s awesome in Chrome though – love it!)

    1. Hello! Sorry about the delay, have just got my hands on a windows to test IE. I’ve double checked the code on a test blog and it working on IE just as in every other browser. I have since updated this tutorial here, but if you want to add ****@gmail.com to Blogger > Settings > Permissions, I will login and take a look at the code for you in order to resolve the IE issue.

  11. Hi love!

    a) You are amazing!!!!! and i am so grateful for this tut.
    b) how would i go about removing the padding from drop down menus/ making the hover color extend all the way (not just around the word)
    and
    c) align the words in the drop down left?

    So many questions haha!

    Thank you so much!

    ps its live here: http://jazzlipslayout.blogspot.co.nz/

    xE

    1. Hello Elly, I’ve updated the tutorial above which should help with your questions. I’ve also created a new tutorial for a drop down menu which allows much more customisations – http://xomisse.com/blog/add-drop-menu-can-styled-template-designer/. Hope this helps

  12. Hi there! I’m working on a new design for my site, so I’m playing around with my test blog. I used this tutorial and got it working great (which is a miracle in an of itself knowing me), the only question I have is that I can’t seem to get the menu bar to move over a few more pixels to the left so it will be in line with my post boxes. Is there a way to do this?

    Also, do you know how to get the navigation menu above the header? My theme layout won’t allow me to do it right now, and I was hoping to add a sticky menu bar at the top later on.

    The blog I’m working on is madandmagic.blogspot.com

    Thanks so much, your tutorials are amazing!

    1. Hello ๐Ÿ™‚ thank you so much, glad you like them. Yes you can, find .tabs-inner in Template > Edit HTML, it may look like this .tabs-inner { padding: 0px 15px; }. Reduce the value for padding to remove the space and move it to the left. I have a tutorial for two kinds of sticky menu’s and you don’t need to move the navigation above the header for them to work. I’ll write up a tutorial about moving gadgets above the header element for you, will let you know when that is published ๐Ÿ™‚

      1. Thanks so much! Your trick for the padding worked great. I tried someone else’s tutorial for allowing me to drag my menu bar to the top above my header, but it didn’t do anything. I’d like one that goes all the way across the screen (like yours) but that is always at the top, if you see what I mean. I appreciate the help so much, thank you!

        1. I have a good few tutorials for navigation if you wish to take a look, some explain how to get the full width. This tutorial will show you how to create a sticky navigation and here is the post about moving gadgets above the header. Hope they help! x

          1. Hey there! Sorry to keep bugging you, but I’m still struggling with this. I’ve gotten the menu bar above my header now, but I can’t figure out how to get it all the way across the screen, or at the top. I looked through the other articles, but I didn’t seem to find what I was looking for. And I tried to make it do the sticky thing, but it didn’t want to work for me. Is there anything else to try? Thanks so much for all your help, you’re really amazing!

            PS: I’m using this test blog now, because I screwed up my other one: http://madmagictest.blogspot.com/

          2. Hello. Sorry about the delay replying to you. Thank you so much ๐Ÿ™‚ Find and add the following between the brackets position: fixed; top: 0px; left: 0px; width: 100%; z-index: 999;. Then delete width: 1110px; from #NavMenuleft. That will make it the full width of your blog, at the top and make it sticky.

  13. Thanks for sharing with us. Like your post a lot. And it’s the best looking drop down menu I’ve ever seen with code available.

    1. Thank you, glad you like it

  14. I want to make a drop down navigation with the same menu style in my theme.
    because my menu matches with the theme and it looks attractive.
    Kindly tell me how to do step by step or Email me.
    Regards,
    Sohail

    1. You could try this tutorial which is easier to customise – http://xomisse.com/blog/add-drop-menu-can-styled-template-designer/

  15. I still have issues to change the width. Could you please advise?

    1. On your navigation menu? Or a different drop down one? To make your current menu fit to your blog width find .tabs-inner .widget li a in Template > Edit HTML and change the padding to 1em. You could also alter the font size in Template > Customise > Advanced > Tabs. Hope this helps x

  16. I tried in my blog but didn’t work. I am novice in HTML. Drop down menu appears as sidebar gadget. Could you help me ? My blog http://educationsoftware4students.blogspot.com/.

    1. It appeared in your sidebar? Go to Layout and move the gadget to above the content area. You could also try this tutorial instead which is easier to customise – http://xomisse.com/blog/add-drop-menu-can-styled-template-designer/

  17. Hi Ellie, I just finished doing this fantastic update to my blog. Thank you so much for posting it on the web!!!
    However, although the drop down menu appears for the tabs I set up ( “Domestic Travels” etc.)
    it doesn’t let me click on them until I select it with my keyboard using the Up and Down arrows and then it allows me to click on them.
    I was wondering if you could help me figure this out. I just need it to let me select the links by just hovering over them with the mouse (without having to use the keyboard’s up and down keys).

    thank you in advance for your help,

    Sincerely,

    Liliet

    1. Hello. Your blog is currently private, could you add me as a reader so I can have a look at your code and let you know how to fix it ๐Ÿ™‚

  18. Gigi

    Hi, how do I add blog posts under each of the categories? I’m a bit confused ๐Ÿ™‚ thank you

    1. Hello ๐Ÿ™‚ on Blogger when you are writing a post, simply add a label on the right. Then for the URL of the menu, use http://yourblogname.blogspot.com/search/label/LABELNAME. So if I label a blog post “fashion”, then in my navigation menu I’ll use http://yourblogname.blogspot.com/search/label/fashion as the URL. Does this make sense? x

  19. Abhishek

    Is their any easy way to do this…?

  20. Kelly

    Awesome Ellie, just brilliant. So easy to use!
    Just wondering how I cold go about customising the font?

    Thanks again ๐Ÿ™‚

    1. Thank you! Use this tutorial to add the custom font to your blog and then add .tabs-inner .widget li a { font-family: NAME-OF-FONT;} before ]]> </b:skin> in Template > Edit HTML. The code .tabs-inner .widget li a may already exist in your template, if it does add font-family: NAME-OF-FONT; between the brackets.

      1. Kelly

        Absolutely incredible Ellie. I can’t thank you enough, both for the coding and taking the time to reply ๐Ÿ™‚

        Bless your cotton socks lady ๐Ÿ™‚

        1. Awh no problem lovely, so happy to help ๐Ÿ™‚ x

  21. I’m not sure what I did, but I can’t get onto the editing the HTML code bit because once I’m there, I cannot find anything. I’m unsure if I did something wrong earlier and I was left quite confused. Could you please check the link I gave for my ‘Website’ on this comment to take a look at what I did? So I can know what my mistake was? I didn’t get the navigation bar to drop down, the subcategories are all simply below the main categories. Thank you so so much!

    1. Hello. You are missing the CSS for the drop down menu to work, it’s point 7 above and needs to be added to Template > Edit > above ]]> </b:skin> or else in Template > Customise > Advanced > Add CSS. This is what makes the links a drop down. If you are having trouble finding where to post the code in the HTML editor, check out this post which explains the steps.

  22. Talal

    Thanks. You really helped me to figure out how to do this.

  23. Hi there!

    I just want to say a BIG thank-you for providing this wonderful tutorial, your straightforward instructions saved me hours of heart-ache.

    I just have one little query and would really appreciate it if you could take the time to have a look.

    The drop-down menu on my website works fantastic apart from one minor little nagging problem that is driving me absolutely crazy!! ๐Ÿ™‚

    For some reason the first link in every drop-down box is slightly adjusted to the right and I have no idea why.
    I was wondering if you could at least point me in the right direction in regards to where to look for the code to fix this.
    (website below)

    Thank you so much again,

    Dylan K

    http://www.kitchenerphotography.co.uk

    1. Hello Dylan. Glad you found the tutorial useful, very happy to hear it! The reason is a white border on the left of the first link, to remove it find .tabs-inner .widget li:first-child a and instead of border-left: none; write border-left: 0px solid transparent;. This should over-write the code border-left: 1px solid #ffffff; found under .tabs-inner .widget li a, although you could change the 1px to 0px also. Hope this helps!

      1. All fixed!
        Thank-you so much again!
        Dylan

        1. No problem, happy to help!

  24. Hi Ellie,
    This tutorial is so helpful, I’ve tried adding the drop down menu since last year, and nothing seems to work. I got the menu lined up but the dropping thing is not working. I think I must have done something wrong adding the CSS code, but I can’t figure it out. Also, my blog shifted on the right. Please help!

    1. Hello. You’re using a page list gadget for your menu navigation. You need to add the code above to a HTML/Javascript Gadget for it to be a drop down.

      1. Okay. I deleted the page widget and it still looks the same.
        http://enticedbybooks.blogspot.com/

        1. Yeah but now I can see the problem. You are missing a closing bracket for #sidebar a:link, #sidebar a:visited before the CSS for the drop down navigation in Template > Edit HTML.

          1. OMG! I can’t believe it really worked!!! Thanks so much Ellie!

          2. No problem ๐Ÿ™‚

  25. Im so, so sorry to bother you again.

    This menu looks and works perfectly in all recent versions of Chrome, Firefox and Safari however in all versions of Internet Explorer up-to and including 11, the drop-down menu appears transparent (instead of solid grey) and hides behind all the content… I also can’t click on any menu sub categories apart from the very first one. Im not sure what Im doing wrong…

    Ive probably spent the last 6 hours pulling my hair out trying to figure out what the problem is ๐Ÿ™‚

    I didn’t want to bother you again but I feel like Ive Googled everything I can think of and I still can’t seem to find a reason why this could be happening.

    1. Hello Dylan! Sorry about the delay, have just got my hands on a windows to test IE. I’ve double checked the code on a test blog and it’s working perfectly on IE so perhaps it’s conflicting with other code. I have since updated this tutorial here, but if you want to add ****@gmail.com to Blogger > Settings > Permissions, I will login and take a look at the code for you in order to resolve the IE issue.

  26. Hi! Thanks for your tutorials! This is just what I’m looking for. I am a beginner as a blogger, but would really love to get a navigation bar with sub navigation. I tried to add that code in the first step, but did not succeed to get it right. I have not a basic template from Blogger but have bought it and installed, so will your code work? I am afraid to test as I don’t know if I’ll mess up the template I’ve bought. Please help me! ๐Ÿ™‚
    Thank you so much in advance!

    1. Hello, yes it should work. You may have to alter your template a little depending on how it was coded in the first place. Download a backup of your template incase you change something by accident, that way you can just restore it ๐Ÿ™‚

      1. Thanks for your answer! I’ll try to look into this. ๐Ÿ™‚

  27. Hello, I’m really glad with this tutorial. You explain it so well.
    Only it doesn’t work by my blog, maybe I do something wrong?
    I made the html code from number 3 for my blog and edited in a widget.
    After that I copied the HTML code of number 7 in my html, above
    I already had a navigation bar with labels/subjects.

    After this the html code of number 7 appears on the top of my blog. And the navigation bar is very big, with all the subjects in a list below each other. Now I’ve deleted these codes, so my blog looks like before.
    Maybe this has something to do with my template I bought?

    I hope you can help me, I don’t know much about HTML so it’s pretty difficult for me.
    And excuse me for my bad english haha

    1. Hello! I can’t see your code as your template is using a frame so it could be something to do with that, although you should still be able to add a menubar. I’m going to suggest trying this tutorial instead, it’s slightly easier to instal but gives the same results. Add the HTML code and css without altering anything, then once we get it working you can add your links and customise it. Let me know how you get on ๐Ÿ™‚

      1. Hello! Thank you, I’m gonna try it. Must I remove the comments between /* like this */ before I edit that code?

        1. No anything between /* and */ gets ignored by the browser so you can keep them, they are to help you understand the code ๐Ÿ™‚ Remember to download a backup of your template before you start.

      2. I’ve tried it, but the results are the same ๐Ÿ™

        1. Okay, keep it that way for a few minutes so I can have a look at the code.

        2. The code isn’t there, have you removed it?

          1. Yes, I removed all the new html codes from the tutorial above, ’cause it looked silly to keep it that way.

            but I still really want the drop down menu haha, Only I don’t know how

          2. In order for me to help you fix the issue, I’ll need to see it installed so that I can double check your coding.

          3. Okay I will ๐Ÿ™‚ I hope it doesn’t have to be there to long ๐Ÿ™‚

          4. Let me know when you’ve installed in and I’ll have a look for you ๐Ÿ™‚ x

          5. Ah! You’ve not added the CSS to the right section, which is why it’s appearing above your blog. You need to add it under .profile-textblock { text-align:center; } and above the closing b:skin tag which is </b:skin> for it to be read.

  28. I finally got it all fixed up, thank you so much!!!

  29. I had to comment just to say thank you so so much! you explain it so well and after almost pulling my hair out searching google you saved me!

    I have a query though, is there any way I can make the menu to be on the left rather than in the centre?

    1. Hello Rosie, thank you so much! Yes, go to Template > Edit HTML and find ]]> </b:skin>. Above this find #NavMenu remove the width under #NavMenu and then find #NavMenuleft and change float:none; to float: left;

  30. Hai!
    Now I’ve put the code on the right section, I’m sure of that.
    The code now cannot be seen, but instead of that there is a long and wide list of all my items and subitems., from the widget/gadget. So I removed the widget now. The code is still in my template somewhere, but that cannot be seen. I think it won’t work, I don’t know how ๐Ÿ™

    1. Again, I can’t check it if you have removed it. If you want to put an order through here I can instal it for you.

  31. Hello

    Really easy and simple…

    Thanks a lot

  32. Hi friend, This is a great blog that you have written about creating a drop down navigation menu. I want to create the drop-down menu on my blogspot blog as you have applied for the page of Follow, that is , when the curser of mouse is brought near the page that should show the links as shown in your Follow page above. Could you tell me how to do that ?

    1. Follow the tutorial above but add the links to the SUB-CATEGORY section – so for my blog follow is the category and my links are the sub category ๐Ÿ™‚

  33. stephania

    Thanks for your tutorial, I have just managed to do my navigation menu. ๐Ÿ˜‰

  34. Thanks for the code and I really appreciate it. But I’ve been having trouble with my drop menu showing? I don’t know what link to put in the categories? Is that why my drop menu isn’t showing?

    1. Hello, it looks like you’ve replaced the code in step 3 with just links. You need to keep the code and just add your URL and titles.

  35. Thank you for your wonderful tutorial, it was straightforward and very easy to follow! I’m just in the process of loading your navigation menu on to my site and have run into one problem with the hover menu. I’m unable to hover over the submenu’s with a mouse. It does seem to work with the arrow keys. Can you suggest a fix for this? I’ve looked at my site in both Chrome and Firefox.

    Thanks in advance!

  36. Hi!

    First I want to tell you how amazing you are for making this blog with all of the tutorials! The majority of what is on my blog I found the tutorial from you!

    And second, I need help. For the life of me I cannot figure out how to shift the whole thing to the left so that it will line up with the edges of the white. That’s my main problem. I was also wondering how to get rid of the white lines in between the tabs. And I can’t figure out how to center the tabs, they seem to be left aligned.

    I look forward to hearing from you and thank you so much for helping and for all your lovely tutorials! ๐Ÿ™‚

    Niki @

    1. Hello Niki, thank you so much. You’re using the older tutorial which is slightly more different to customise but I’ll guide you through it. If you have a look at your blog content area, you’ll see that there’s some space on either side. In order to have the navigation the full width of the white area, we need to re-adjust the padding.

      To do so find .tabs-inner { padding: 0 15px; } and change to .tabs-inner { padding: 0px; }. Then find .content-inner {padding: 10px 40px;} and change to .content-inner {padding: 10px 0px;}. We’ll then add this space back to just your main content area by adding .section {margin: 0px !important;} .region-inner.main-inner {padding: 40px;} to your CSS (above ]]> </b:skin>). Then change width to width: 1100px; under #NavMenu and #NavMenuleft. Finally to centre the links, find #nav and change margin to margin: 0 auto; and add text-align: center; in between the brackets.

  37. Jennifer Wisemore

    On #6 am I to post that somewhere?

    Thanks,
    Jennifer

    1. That’s part of another tutorial for altering the look of your navigation where we alter the parts in pink. You can alter this if you want, it’s not necessary but usually helps.

  38. Hey Ellie!

    I’ve used this tutorial before when planning for my new blog design, but now that I’ve tried to replicate it on my real blog, I must have mucked something up somewhere, as it’s not adjusting to the proper drop down thing. Could you help me out? Thanks so much!

    The URL is http://www.emphaticallyelle.com now, and it should be set to public again so you can see it.

    1. Hello, it’s not picking up the CSS for some reason. Add ****@gmail.com and I’ll take a look for you ๐Ÿ™‚

      1. I added you as a blog author, I hope that was the right thing to do. Thanks so much, Ellie, you’re really the best! ๐Ÿ™‚

        1. Awh thank you. That’s perfect, I’ve accepted ๐Ÿ™‚ can you go back and change author to admin, this gives me access to your template.

          1. Okay, I’ve done that!

          2. All fixed, sorry about the delay. You were missing a bracket in your CSS so all code after that wasn’t being read ๐Ÿ™‚

  39. Dan

    I tried this stuff but it only show for the first time. When I clicked “Home” for example, the page is back to the original home page and the menu created using html code disappeared.

    1. What’s you URL and I’ll have a look?

      1. Dan

        I followed your tutorial in this page. I am now blogging using blogger.com. As I am beginner, I use default template. But I want to have some dropdown menu so I followed your instruction above. At the end of the day, it is true the codes run well. But, for instance when I clicked on “Home” menu, which I have set for my blog homepage, the page is surely reloaded. And the menu which have been generated by the codes, vanished, and turn only a “Home” menu from the template of blogger.

        1. Yes, I understand all that but I need your URL to check the code and see what’s conflicting.

        2. Just checked your blog (maybe I have the wrong one) but the code for the nav menu and the CSS doesn’t seem to be in your template. I’d recommend using this updated tutorial which is easier to implement and customise – http://xomisse.com/blog/add-drop-menu-can-styled-template-designer/

          1. Dan

            Hi Ellie, thanks for the link. I am now happy with my blog’s navigation menu.

  40. Hi Honey!

    Thanks for the awesome post, been looking EVERYWHERE for this drop down tutorial ๐Ÿ™‚ however, I’m having the slightest of an issue. I’ve done all the steps (except for #6 as I love your custom one on your blog) but somehow, there’s 2 of my dropdown menus and their located on the right hand side of the blog!! WTH! Also I was wondering how do I link the categories in the drop down menu to my posts? is it just by using the usual labels?

    Thank you xx

    1. Hi lovely, they are in your sidebar. Go to Layout and drag the 2 HTML gadgets on the right up to underneath your header, they will then look full width above your sidebar and blog post gadgets. Yes, use labels as your categories and add the label link as the URL ๐Ÿ™‚

  41. I change my template and re-attach the codes above but it didn’t go as I want. The dropdown menu seems falling behind the main page. How should it be? Thanks..

    1. Hello, it doesn’t seem to be falling behind the main content. You only have 1 submenu so that’s all that’s appearing.

      1. DAN

        Hi? Yes. A couple hours after I asked you I tried fixing it myself and it did well. Now it can appear as I want.

  42. Hey there! So, I’ve been slaving away at my theme for a few days now, and I’ve reached a snag. I can’t seem to find EXACTLY what I’m looking for on the internet to help me, and this was the closest I got. Your website is wonderful. Anyways, I created my navbar for blogger using Photoshop slices. You can view it on my blog, @ http://rebelchanel.blogspot.com! So basically for the Weeklies, Beauty, and Tutorials links I want a drop down menu to appear below the image while hovering. But I am stuck on figuring out how to get this to work! Everything I have tried has expanded the cell that the images are in, and puts them out of alignment with the rest of my slices.

    So, Iโ€™ve KIND of figured it out. Instead of having my nav bar in a table, I formatted it in list form. BUT. For some reason itโ€™s not centered, and there is a weird box underneath beauty that is always there.Halp.

    Any help would be greatly appreciated. Thanks! โ™ฅ

    1. Hello, thank you so much. Sorry for the delay, I’ve been ill this week. I see you figured this out? It looks great!

  43. Hi!

    I just added this to my site and love it! Just a few questions–

    1. How can I center the nav bar?
    2. How can I make it so that the hover text is white or black instead of gray?

    Here is the code I have so far! Please help ๐Ÿ™‚

    /* —– CSS Nav Menu Styling —– */

    #cssnav {
    text-align:center;
    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 Font Size */
    }

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

    #cssnav li {
    float: left;
    padding: 0px;
    }

    #cssnav li a {
    background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
    _background-image: none; /* 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 Font Color */
    }

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

    #cssnav li > a:hover, #cssnav ul li:hover {
    color: $(tabs.selected.text.color); /* Template Designer – Change Font 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) $(tabs.background.gradient) repeat-x scroll 0 -800px;
    _background-image: none; /* 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) $(tabs.background.gradient) repeat-x scroll 0 -800px;
    _background-image: none; /* 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: #b6973d; /* 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;
    }

    1. Hello, you’ve used the code form this tutorial so you can change the hover-over link colour by changing that section in the Template Designer (Template > Customise > Advanced > Links) or by manually changing the colour value under #cssnav li > a:hover, #cssnav ul li:active. Follow the comments in the code for help. To centre find #cssnav li and replace float: left; with float: none; display: inline-block;

  44. Hello! Your tutorials have been very helpful, and just what I was looking for for my school project. I have a problem centering the navigation menu though ๐Ÿ™ I tried doing what you recommended to the other comments, but none of it is working for me ๐Ÿ™ I’ve invited you to access my blog already, I’d appreciate it if you could take a look and help me! Thanks so much!!! Oh and thereโ€™s another problem tooโ€ฆ Under my 3rd tab (โ€˜Visual Researchโ€™), the subcategories donโ€™t align, I have no idea what happened! The other subcats under the other tabs work find though! :/

    1. Hello, I tried accepting your invite but the blog wasn’t found. Can you re-add me?

      1. just invited you again, sorry for the inconvenience! ๐Ÿ™‚

        1. Hello, change the width under #NavMenu and #NavMenuleft to 100% instead of 930px. You’ll also need to decrease the padding value under #nav li a, #nav li a:link, #nav li a:visited and #nav li a:hover, #nav li a:active. Then add .tabs-inner {padding: 0px; } .section { margin: 0px; } above ]]> </b:skin>. To get it completely flush against the blog area you can follow this tutorial.

          1. Okay, thank you so much for your help! ๐Ÿ˜€

  45. mirza

    ok thanks for the great tut but i ahve one question
    how can i add 3rd sub menu ?
    like contact—–contact us—-email

    eg-menu—sub menu— sub-sub menu (so called 3rd layer )

    hope you understood :s

    1. I’ll have a tutorial on this soon ๐Ÿ™‚

  46. Hello!
    Thankyou for this tutorial!
    I’m wondering how I should change the font size. I tried to add ‘Font-size: 25’ but it didn’t work. Can you help me please?
    X

    1. You have to specify the measurement so font-size: 25px; or font-size: 25em; under #nav li.

  47. I have a problem with my drop down menu it’s not showing on the front of my page post it’s behind the post and I can’t understand what’s wrong with coding please check my blog then u will confirm what I want to say to you……this menu and sub menu I created but there’s problem in css coding. and correct that error please…………

    1. Go to template > Edit CSS and find .tabs-outer, change overflow: hidden; to overflow: visible;

  48. Hi! I’ve tried making this work but the subcategories just look all wrong. Could you please help me and take a look? I’m going crazy!

    1. Hello, find .tabs-inner li and change display: inline !important; to display: inline-block !important;. The next two steps aren’t necessary but they’ll set your navigation up perfectly – find #nav li a, #nav li a:link, #nav li a:visited and #nav li a:hover, #nav li a:active and change the padding back to 10px 15px 10px. They need to be the same. Then find #nav li ul and change width: 170px; to width: 150px;

      1. imagine that such little things can change it all. Thank you so much for the help, it looks great now ๐Ÿ˜€

  49. Hi,
    excellent tutorial & very easy to follow
    just a question:

    How do you remove the underline from text?
    THANK YOU!

    1. Add the following to your CSS – a:link, a:visited {text-decoration: none;}

  50. Stephanie

    Great tutorial, I’m almost there…. How did you get your menu bar to be at the very top of the page?

    Thanks in advance!

    1. Hello, thank you so much! I have this tutorial for moving gadgets above the header on Blogger that will help you with that.

  51. Jane

    Hey!

    Thank you for this!

    Iv gotten the menu up and it looks great but my post are not going to the different categories even though Iv labeled the posts. Its been driving me nuts! Do you have any tips?

    x, J.

  52. Hi! I am working on a blog design for a client and am having an issue that I can’t seem to resolve… I have created several drop-down menus before (including one for my own website!!) but for some reason, my test site that I show the client is NOT working properly. I’ve tried everything. The menu tabs are all aligning in-line instead of nesting within one another and I can’t figure out the issue for the life of me. Please help!! Thank you so much ๐Ÿ™‚

    1. I’ll need the URL to see if it’s conflicting with other code. If the site is private you can invite ****@gmail.com

      1. Ok, I thought it might have been invisible code on my blog so I started another one and now it works!! Thank you for the wonderful (and easy to read/understand) tutorial. My only issue now is being able to center the text so it spreads the width of the header. Any suggestions?? Thanks!!

        http://ardtestsite2.blogspot.com/

        1. Add text-align: center; to #nav ๐Ÿ™‚

  53. Jana

    Hi,

    I would like ask you how can I put dropdown menu upstairs on blog, like this: http://www.theblondieverse.com/.

    Thank you very much!

    P.S.: My english is not very good, so sorry…

      1. Thank you very much, but I have one more question… I do with your tutorials this. but I want black menu upstairs of page, I still have there white border and I want black line from menu on the whole of page. Pleaseeee how to do it?

        Thank you very much! ๐Ÿ™‚

        1. Hello. You followed the method for when the navigation is below a header img, since you want your navigation at the top follow the first method in the tutorial instead.

          1. Jana

            But this tutorial I had used….

          2. There’s two tutorials shown in that post – “1. make top navigation bar fixed/sticky” and “2. sticky navigation bar when scrolling”. I can only see the code for the second in your template, which won’t work for what you want to achieve.

          3. Jana

            I know what u mean… but I had used both of them and now I have this design, which I send… :-/

          4. Yes I can see the CSS from the 1st method, however the code shown in step 2 of that method (<div id="navigationbar"> and </div>) is not wrapped around your navigation so it is not being applied. You also need to remove method two ๐Ÿ™‚

          5. Jana

            well, I have it on top! ๐Ÿ˜€ But what can I do now? ๐Ÿ˜€

          6. You should remove sticknav and other code from the other method to make sure nothing conflicts. To make the bar full width, go to layout and move the navigation gadget down a little to where you have HTML gadget for the script. This will associate it with the default blogger navigation to pick up that code. Find #NavMenu and #NavMenuleft in your Template and change width value to 100%. Add background: #000000; to #NavMenuleft. To centre the links add #nav {text-align: center;}

          7. Jana

            Maybe I am stupid, but I canยดt center it, donยดt know why…

          8. I don’t see #nav {text-align: center;} in your CSS. Go to Template > Edit HTML and find ]]> </b:skin>, above this paste #nav {text-align: center;}. Then scroll up and find #NavMenuleft, change width to width: 100%;. Finally find #NavMenu above that and change width to width: 100%;.

          9. Jana

            I have it! ๐Ÿ™‚ Thank youuu ๐Ÿ™‚

            I had center it left… it is possible to make a little indentation?

          10. Yes, you can use text-indent: 50px; or margin-left: 50px;

  54. How Do you change the font or text size of the drop down menu!

    can the font for the dropdown menu be different from the main navigation font?

    1. Find #nav li li a, #nav li li a:link, #nav li li a:visited and add font-family: FONTNAME; and font-size: SIZE; in between the brackets.

  55. nice post………….it worked for me…….

  56. I’m not sure why but i’m trying to add sub-menus and they only appear when i increase the height of my navigation menu, however this way i end up with a lot of space between the menu and the posts… can you help me fix this? thank you so much!

    1. Hello, go to template > Edit CSS and remove the height value. Instead find .tabs-outer, change overflow: hidden; to overflow: visible; and save.

      1. it worked! thank you so much! ๐Ÿ™‚ BY THE WAY, DO YOU KNOW HOW TO MAKE THE MENU FILL THE WHOLE PAGE? I TRIED TO CHANGE WIDTH TO 100% BUT IT DOES SEEM TO WORK? I WANTED IT TO LOOK LIKE THIS: http://leblogdeneroli.com/ THANK YOU ONCE AGAIN!

        1. No problem. Add .tabs-inner {padding: 0px; } .tabs-inner .section { margin: 0px; } .section { margin: 0px; } above ]]> </b:skin> in your template. Remove the max-width value from .content-outer, .content-fauxcolumn-outer, .region-inner. This tutorial here may explain that step a little clearer for you.

          1. I followed your tutorial but unfortunately it doesn’t seem to work for me… both my sidebar and my blog posts moved to the right when i did it…
            thanks for the help though! ๐Ÿ™‚

          2. It will expand your main content area (posts + sidebar) but you can reposition them by adding the max width to just that section.

          3. can you help me with something else?
            I was changing my blog design and for some reason the usual “post by x” ” labels” and “comments” don’t seem to appear… do you know why?
            http://www.drawingdreaming.net/

          4. They might have been removed from your template, you’ll have to manually add them back in. This post might be able to help you with that – http://xomisse.com/blog/rearrange-post-header-footer-section/

  57. Hi .
    I added the drop down menu. but these codes are only show single column . Try to correct them but all messed up.

    1. Hello, you’ve removed the code so I can’t check it for errors.

  58. Hello! Thank you for this tutorial ๐Ÿ™‚

    I just have one problem – getting it to centre! – I did try the fix that you mentioned above but didn’t have any luck. Is there any chance you could have a little look? Thank you so much ๐Ÿ™‚

    Amber

    p.s. I tried to use this tutorial ( http://xomisse.com/blog/add-drop-menu-can-styled-template-designer/ ) but the sub-categories weren’t sitting under the main tab (just a big list) – but I like this look with each sub-cat in it’s own boxed tab. Cute!

    1. Hello, there’s a couple of errors in your code which I’ll explain. Find #cssnav li and change float:center; back to float:none;, center float doesn’t exist. Then find #cssnav, remove #nav {text-align: center;} from between the brackets as you can’t nest two selectors and instead add text-align: center; between the brackets. It should centre then. In regards to the other tutorial, did you add the CSS and alter it? The CSS is what makes it drop down so if there were errors or conflicting code it would cause them to appear in one big list. Hope this helps ๐Ÿ™‚

      1. Oh that’s wonderful. thanks! I’m all centred now ๐Ÿ™‚

        The only LITTLE thing is that the border seemed to ‘fall off’ – the tabs were kind of boxed in before and now there is no border line underneath the tabs or to the left side. What would have changed that?

        * That’s the look I liked from the other tutorial (and I’d like the sub-categories to have too).

        Amber. x

        1. Hello, You’ll see under #cssnav, #cssnav li ul, #cssnav li ul a:hover, #cssnav li ul li:hover > a that border has been turned off (set to 0px) to over-ride Bloggers default code so remove each of these. You may also have to do some editing under the Tabs heading in your CSS to get it exactly how you want ๐Ÿ™‚

  59. Hello I’ve read your blog and managed to create a drop down menu but now I’m having trouble posting into these specific categories. I’ve tried tags but they don’t work. What am I doing wrong? Would really appreciate if you could answer me as soon as possible, I’ve been stuck for weeks and nothing on google seems to cover my question!

    Thanks again,
    Alexia Xxx

    1. Hello Alexia. I’ve had a look and your main navigation (Places to go, Things to do, People to meet and videos) and items in your drop down menu (nightlife, beach parties, inspiring people, etc) are all pages. Pages in Blogger are static, meaning it’s one page you write on and not a feed of posts. The items under Places to go are labels. Labels are applied to posts in order to categorise them. When you click on a label (such as Beaches under Places to go) your post which has the label “beaches” comes up, same for Towns to Visit under Places to go. I presume that’s how you want the entire navigation to work?? If so, you need to make labels for Places to go, Things to do, People to meet, videos and each subheading in the drop down menu. Then add those links to your navigation. Does that make sense?

  60. Hey!

    Thank you soooo much for that tutorial, it worked really well for me. But I couldn’t make it fill 100% of my blog space (1020px), I don’t why…

    I’ve changed the values of #NavMenu and #NavMenuLeft from 800 and 800 to 100% and 100%, and also 1020px and 1020px, but it didn’t work. It was exactly the same with 100% (I would say 10px less from blog space on each side), and with 1020px, it just passed the blog space on right side, and was about 50px less space on left side…

    Do you know how can I correct this issue ?

    Besides that, it worked perfectly! It took a little bit of time to fix the colours, but they are really good right now!

    Thanks again.

    1. Hello. The full explanation is in this tutorial but it’s Bloggers default padding and margin values. So to overwrite these add .tabs-inner { padding: 0px; } .section { margin: 0px; } to above </b:skin> in Template > Edit HTML. If you want to remove the remaining space around your header area then also add .content-inner { padding: 10px 0px; }.

  61. Hi, I followed your instructions, and I noticed that in the dropdown UL, the topmost is a bit to the left of all the others below it. I tried this in different browsers, and it is the same.

    1. Just had a look at your code, thats the border values attached to Blogger Tabs. Find .tabs-inner .widget li a and change border-left: 1px solid #ffffff; border-right: 1px solid #dddddd; to border-left: 0px solid #ffffff; border-right: 0px solid #dddddd;

      1. James

        Thanks!

        This is the only code I found, though

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

        padding: .6em 1em;

        font: $(tabs.font);
        color: $(tabs.text.color);

        border-$startSide: $(tabs.border.width) solid $(content.background.color);
        border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
        }

        .tabs-inner .widget li:first-child a {
        border-$startSide: none;
        }

        .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
        color: $(tabs.selected.text.color);
        background-color: $(tabs.selected.background.color);
        text-decoration: none;

        1. So for .tabs-inner .widget li a, change border-$startSide: $(tabs.border.width) solid $(content.background.color); border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color); to border-left: 0px solid #ffffff; border-right: 0px solid #dddddd;

  62. Greetings!
    Your tutorial is very helpful & easy to follow (for a beginner like me). Takes me a minute to follow it. ๐Ÿ™‚ I have a question, how can I sort my items to put in my dropdown without using the labels URL (‘coz once I use the labels URL, not only the Dress come out but also the other items.) Do I need to upload the pictures again and post it in order? Please help me. I’m stuck thinking and searching. ๐Ÿ™

    Thank you very much
    xo

    1. Hello. I’m not sure what you mean? You apply labels to corresponding blog posts, adding them only to the posts they apply to. Then use the URL in the navigation bar for the connecting topic

    2. Hello. I’m not sure what you mean? You apply labels to corresponding blog posts, adding them only to the posts they apply to. Then use the URL in the navigation bar for the connecting topic.

  63. Hi hun, how do I centre my tabs? It seems to be a bit on the left hand side? Thanks ๐Ÿ™‚
    x

    1. Depending on the position of your tabs the code .tabs .widget li, .tabs .widget li{ display: inline; float: none;} should work.

  64. Great tutorial – I’ve been struggling with this for a while so glad I came across your page! I used your tutorial for navigation bar with images but is there any way to make the drop down with images?

    thanks,
    Sarah x

    1. Hello Sarah. Thank you! Yes, you can combine this tutorial with that one – so using this tutorial but using images as shown in method two here instead of plain text links.

  65. Hi Ellie,

    Thanks for taking the time to reply to everyone (I can see quite a few people have had issues). I’m afraid I’m another one. Just coming back from a hiatus and making changes to my blog.

    As you can probably see, having some issues with padding – neither of your suggestions work, and I’ve been trying to adjust the padding for my content as well but nothing on the internet seems to work!

    I set up a test blog and it seemed alright, so I’m not really sure what’s wrong…

    Thanks!

    —Update —
    I just found a way to sort the padding for my navigation bar. The only way my blog would recognise the padding CSS code was if I put it above your navigation bar CSS code for some reason (?).

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

    Whilst its perfect for for my header and navigation bar, all my content below is right by the border too. Is there a way to fix this?

    Thank you! xx

    would I have to paste section 2 in data: post. (then something to do with labels?)

    1. Hello, sounds like you’re CSS is not being read properly due to an error – you’re missing a semi-colon on the width: 1060px under #navigationbar and on opacity: 0.80 under .item-title a:hover in your CSS. To lower your main content area increase the padding value for .main-inner in your template. Also, the drop down menu items aren’t showing because you’ve set the background to white, to fix this remove/change background: #FFFFFF; from #cssnav li:hover li a

      1. Thank you! It works – was wondering how I’d do it!

  66. thank you so much for the tutorial! i literally spent hours struggling to understand about 4 other tutorials then i found yours and within 10 minutes i had my drop down menu working perfectly ๐Ÿ˜€ thanks! xX

    1. Awh so glad you got it working ๐Ÿ™‚

  67. sara

    hi ellie. thank you for this tutorial. i followed all your instructions to make this and it didn’t work. it only works when i try on my private blog. i tried so many tutorial before but the result is same, didn’t work. can you help me to fix this?

    1. Your CSS is not being read properly due to an error – you have an open bracket instead of a closing bracket after .post blockquote before the CSS for the navmenu. Hope this helps!

      1. sara

        it works! thank you so much for your help. ๐Ÿ™‚

  68. Is there a simple piece of code that would make Sub-Sub-Categories come off to the side of the Sub-Categories that drop down from the Navigation Menu Bar. I made one years ago, but I can’t remember how and can’t find any helpful articles about it on the web. Thank you for your amazing blog and tutorial.
    Charlie

  69. Hi,
    Firstly, thanks for the coding – it’s much appreciated and by far the best Ive found online. Cant believe blogger doesn’t have this option in their library. Anyway, a few issues have however arisen that I am hoping you can assist with!!
    1) the nav bar doesn’t stretch the full default width of the page and I cant work out how to fix it!!
    2) the drop down tabs seem to have acquired a border on the right of each tab that Id like to remove
    3) main navigation bar, there is a border to the left of each tab on mouseover I want to remove
    4) for uniformity, Id like to fix the width of both the main navigation tabs and the drop down tabs, to an equal width. How might I do this?
    5) and following on from point 4, is it possible to align the drop down options so they drop straight down from their main navigation drop down tab? (at present they drop down slightly to the right)
    Thanks in advance for any assistance you can provide.
    Sara

    1. Hello, thank you so much Sara. Check out this post for making the navigation full width, this post for removing borders. You can’t really have the same fixed width for both without coding each box separately because the text is different lengths for each link. When you remove the borders the drop down menu should be straight under the main item. Hope this helps!

  70. Hi again, unfortunately the drop down menu doesn’t display in the mobile version of the website. Any ideas? Thanks

    1. Hello, this menu will display when using web/desktop view on mobile devices however if using a mobile template version then that needs to be coded separately.

      1. Thank you so much for this post! This is the first code I was able to get to work for a drop down menu.

        Do you have a post on how to get a menu on the mobile version?

        1. Coming soon ๐Ÿ™‚

  71. Hi, I just pasted in the code and when I go to my blog and hover over the categories tab, nothing scrolls down. But I noticed if I changed the height pixels to 200px instead, then the scroll does show up, but I don’t want to increase the height because then that section looks funny, what should I do?
    Thanks!

    1. Your tabs are set to hidden. See steps under heading “Dropdown menu not visible?” at the end of the tutorial.

      1. Thanks! They’re working now!! I appreciate that!

  72. What link I must add here?? which Link brings together all categories? My blog link and ‘#’ don’t work when I add them.

    1. You can add any link you want – internal (to a post, page or label) or external (to another site). Your main URL will show all categories, but you need to use the full URL including the http:// part. Using a hashtag is signifying no link.

  73. Hi Ellie,

    Thanks so much for this tutorial! It worked perfectly and it looks wonderful on my blog.
    One question though, do you know how I can move the links a bit to the right?

    Thanks in advance for all your good help!
    Isabel

    1. Hello, the best way to do it is to find #nav change margin: 0; to margin: 0 auto; and add width: 800px; before the closing bracket. Adjust 800 until it’s in the position you want. If you want it centred add text-align: center; instead of width: 800px;

      1. Hi Ellie,

        Me again! Sorry for all my questions! I hope you have time to answer them. Is it possible to make the menu bar semi-transparent, like the one at apairandaspare.com ? That would be really cool!

        Isabel

  74. Hi Ellie,

    Thanks for the tutorial! That’s really useful!

    I’m modifying template for my better half (see the link) and managed to place the menu bar on the top of the page additionally to the drop down list as per your guide, however… the drop down does not work on any Apple devices ๐Ÿ˜ฎ

    Is there something I can change in css to enable this, or the only thing left is javaScript?

    Really appreciate any answers,

    Casper.

    1. Hello Casper. You’ve got mobile template switched on in Template > Mobile. With this switched off the user can tap the menu item to see the sub menu. I’ll have responsive/mobile tutorials coming soon!

  75. Hello!

    I used one of your other tutorials for my sticky navigation bar, however I can’t seem to figure out how to get the little colored border at the top like you have shown in this tutorial.

    Also, I am having issues with my social media icons being able to hover a different opacity / color / image in the navigation bar.

    Thank you so much for your amazing tutorials, though. They have helped me so much the last few days!

    Kristin

    1. Hello, there’s a tutorial for the top border here. The social media icons will take on the hover effect of your navigation unless they are images, you’l have to manually add a hover effect for images. This tutorial might help.

  76. Quinn C

    Hi Ellie,

    My problem is solved. I tried again this morning and the gadget finally condescended to save the ‘Contact’ category. It must’ve known I’ve come to ask for your help and dared not mess with me anymore.

    Thanks again! xoxo

  77. Hello Elaine!
    I hope you’re super fine. Thanks to your tutorials I was able to make major changes in my blog design, I’m eternally grateful for that.
    This particular post was more than useful since it helped me to align the navbar center .
    I might have done some mistake since the submenu isn’t responding properly now,; when I scroll down the mouse, it just disappears and only works with the keyboard up and down arrows.
    I tried changing the padding values, but got lost in the process and made a mess.
    Could you help me fix this, please?
    I’d like to make the submenu the same size of the menu, align it left and decrease the height of its subtabs.
    Thank you very much in advance!
    Huge hug from Buenos Aires!
    Maca

    1. Hello. This tutorial has been updated and I recommend using the updated version instead. If you do continue to use it, check the “dropdown not visible” section at the end of the post. It’s likely that that will fix the issue you are having. Let me know how it goes ๐Ÿ™‚

      1. Hi! Thanks for your answer!
        I unistalled the code I had and installed your cssnav codes, following your updated post and it worked up perfectly!
        Many thanks for your help and tutorials!!! ๐Ÿ™‚ Xo

  78. Hi,

    I was wondering if there was a way to keep the links fixed. When I change the width of my screen and make my browser narrower, the links jumble up and no longer stay in their respective positions. I was wondering if there was a code that could help fix this problem?

    Thank you so much!

    1. Hello, you’ll have to use media queries if you want to make the navigation / blog responsive. I don’t have tutorials on this yet, but am planning some in the future.

  79. Crystal Marie

    I really like your outline that you have for this, and I plan on trying it on my tester blog soon. I just have one question though, is it possible to make “sub sub categories”? Like, where you have the drop down menu, and then another menu comes from those ones? (I hope that makes sense!)

    1. Hello, yeah you just have to add another list the same way we have for the first dropdown ๐Ÿ™‚

  80. I want to say thank you!!! I used your tutorial for our blog and it really helped me out! Thanks alot!

  81. Yapo

    hello~ I don’t think my css code has .tabs-outer, I can only see .tabs-inner even when using ctrl+F.
    Do you think I can just the code? if so may I ask for the full code ‘sentence’ and where to put it?
    Below .tabs-inner or just above /b:skin? thanks!
    I can’t seem to make my drop down menu visible >.<

    1. Hello, you can just add it to your template. You can add it anywhere between <b:skin> and ]]></b:skin> but it’s usually better to add above ]]></b:skin>.

  82. hello dear!

    I already followed all your tutorial. But I am still cant change my background color of navigation, style of the text and size. Could you please see my blog. I already followed all your tips but I am not sure with it. I hope you can help me.

    I already change style of font in Edit HTML and Add CSS.

    Can you help me please. ๐Ÿ™‚

    Thanks!

    1. Hello, you need to move the navigation gadget into the tabs section of your Blogger template. Go to Layout and move the gadget up one level, where your pages gadget is. Otherwise you can manually change the background, fonts and colours by using the ID as the CSS selector.

  83. chiyo

    Hello, what code to add if i use page list gadget? and where to put it? Help

    1. Hello, you can’t add dropdown items to the Pages gadget.

      1. Thank you for your reply. I’ll change to navbar later. By the way how can i get the link for the category CATEGORY 1

        1. You can use post labels, the post here will explain in detail.

          1. Thank you!!! It help me a lot

  84. Hello my drop-downs are functioning but I cant figure out how to link my posts to my subcategories. The pages are there but I cant add my posts to them is there coding i can put in POST html to add the post to each category?

    1. When writing a post you can add labels on the right hand side, from there you can labels in your navigation as categories. I talk about this further in this post.

  85. Hey, I’ve just tested this out on a new blogger blog I’m working on and it looks great, but I can’t click on the sub categories. As soon as my mouse leaves the main link the dropdown disappears. Do you know how to fix it? x

    1. Hey Cat, how are you? Check the overflow on tabs, padding values for main navigation and ensure that there isn’t anything “sitting” over the content (like the main content area margin). If you want to send me on a link I can give you more details ๐Ÿ™‚

  86. Hello, I tried out your Tutorial and I made it on my test blog, and I got it, how it should be, but I don’t know, how I can make it look like my old menu. on my blog (http://eva-jasmin.blogspot.de) I have a menu floating on top of the site, that’s how I want the dropdown menu to be like, but I only get it the way I have it on my testblog (http://evajasmin22.blogspot.de). How can I make the Menu floating at the top, like on my blog, but still be the dropdown typ of menu? Best Eva

    1. Hello Eva, you’ll need to style it using CSS to match the design of your old menu. There is an updated tutorial for this that uses the Template Designer options that I would recommend using instead. I have a tutorial here on how to make it fixed.

  87. Hi, so I managed to get a drop down menu and it’s working. However, when I click on one of the buttons in the menu the following shows up ‘Sorry, the page you were looking for in this blog does not exist.’. I don’t know why because I’ve added pages for all the categories and sub-catagories. I also don’t know how to add posts in the actual subcategories (or the categories) which is a real bugger since the whole point is to be able to organise the posts into the subcategories. It would be so helpful if you could tell me how. I’ve tried making links and add labels, but nothing happens :'(
    Thank You, Vendela

    1. Hello, you are missing the “/search/label/” section of the URL. The post here will explain how to use labels correctly to organise posts and how to add the URL to your navigation. Hope that helps!

      1. Hiii, love this tutorial, it’s beautiful and very helpful! Thanks so much. I just have one SUPER aggravating problem…when I roll over the categories they show up just fine, and the sub categories pop up, BUT I can’t roll over them?? When I go to roll over the sub categories they disappear! Please help! ๐Ÿ™‚

        1. Hello. See step 9, that should fix it ๐Ÿ™‚

  88. Hi,
    Thanks very much for this… it’s the only tutorial I’ve found that actually works on my test blog! However, the text on the nav bar doesn’t seem to be working as a link. For example, to get a drop down menu to appear, you seem to have to hover the mouse below the actual text to get it up. To click on a link, you seem to have to click below the text to click on the actual link. I was wondering if there was anyway to change this?
    (Sorry if I haven’t explained that very well!)
    Thanks!

  89. Hi! I’m grateful that someone finally posted a tutorial that also a normal human being can understand. But nevertheless I have a few problems with making my menu work.. It keeps looking like this (http://de.tinypic.com/r/1z333md/8) and I don’t know what I should change to make it work..
    I hope you can help me!
    Greeting from Germany ๐Ÿ™‚

    To see the picture you have to click on โ€œZoomโ€ in the โ€œToolsโ€ category on the left!

  90. Hi,
    Firstly I just want to say what a fabulous tutorial this is!!

    I’ve just got one query. When I use my drop down menu to go to my ‘photos’ take and then select a place, once I’m at that place, it comes up with a preview strip along the left hand corner and none of my menu links work. Is that just because I’m logged in or have I got a fault?
    My blog is http://terzoannoitalia.blogspot.co.uk

    Thank you!
    Meg

  91. 1] YOUR GUIDES ARE SOOOOOOOOO AWESOME!! THANK YOU SO SO MUCH!!!
    2] COULD YOU HELP ME PLEASE TO CHANGE THE COLOUR OF THE TAB THAT OPENS? IT’S BLUE AS YOU SEE HERE http://PEACHPLZ.BLOGSPOT.CO.IL/ AND I CAND FIND A WAY TO CHANGE IT…
    3] I WAS WONDERING, NOW I HAVE MY CATEGORIES, SUB CATEGORIES, AND I WANT TO ALSO HAVE “SUB-SUB CATEGORIES”. I.E THE TAB IS “MAKE-UP” WHICH OPENS TO “SUB CATEGORIE AS “LIPS’, AND I WANT “LIP” TO OPEN MORE CATEGORIES SUCH AS “REVLON” “BENEFIT” AND OTHERS.

    THANK YOU SO SO MUCH FOR YOU ANSWER!!!!!

  92. Janeese

    Hey Elaine,
    I love this navbar tutorial. I’ve had it implemented on my blog for sometime now. One question though, any idea how I can add a drop down archive into the bar? (Example: http://www.alyssa-lenore.com)

    Any help would be great!
    -Janeese

    1. Hello, the only way to do this on Blogger is by manually adding the months.

  93. Abby Dala

    Hello! this tutorial helped me a lot! However, I have a problem in terms of clicking my sub categories because it isn’t fixed as I wanted it to be. It keeps on disappearing. Can you help me? Thanks

    1. Hey Abby, take a look at the steps under Dropdown Menu Not Visible, that should help ๐Ÿ™‚

  94. Hi,
    Thanks so, so much for this tutorial! After countless hours of trying to get everything to work, I DID IT! And I even managed to put social media icons on the navigation (well, they aren’t there now but I know how to do it thanks to you!) My problem is that I can’t make the nav bar full width despite following all your instructions religiously. And when I upload the social media icons, they’re all in line and everything, but there’s a massive gap between my navigation and the icons ๐Ÿ™ What can I do? ๐Ÿ™ Please help, I’m stupid!

    Connie
    xxx

    1. Hello Connie, add a background color to #navigationbar, it is already full width. There should be a gap between the social icons and text if you’re following this tutorial, as we’re placing them on either side of the navigation bar and not together in one line.

  95. Hi Elaine, your site has been such a great resource to help design my blog. I’ve installed this drop down menu, I’m not sure if I played too much with the coding, but is there a way to align the drop down list/tabs to center underneath the navigation heading? The text in my drop down list are centered, however the tabs itself are too aligned to the right. Thank you so much in advance.

    1. You can add a margin left value for the sub UL, but it won’t be correctly centred for each item. The sub UL is aligned underneath each main category, with the idea that left aligned text will be in line with it.

      1. Oh, I see. How do I get the text in the drop down list aligned to the left?

        1. Add text-align: left; to the sub list items ๐Ÿ™‚

  96. Hi Elaine, thank you for this tutorial. Menu looks realy good, but one mistake occured. The white lines between the topics. I have no idea what to do. Could You please help me?

    Thank You
    Iveta

    1. Hello. Thank you! Check out this turtorial on removing borders from navigation, that should help ๐Ÿ™‚

  97. Hi, Thank you for you time writing the tips! However, my navigation bar is vertical rather than horizontal….How do I make it horizontal? …

  98. Ah..never mind, it works horizontal! Will continue to customize it.. ๐Ÿ™‚ Thanks!

  99. Hi! Thank you so much for your tutorials they’re so helpful! I wanted to ask wether it would be possible to add a subcategory under the subcategory? For example, on my bog under the travel tab I have pages divided by continent but would it be possible to further separate into countries? If so, what would be the coding for this?

    Thank you in advance!

  100. Vanera

    How do you make this drop down navigation bar responsive for blogger ?

    1. There are a couple of ways, easiest is by using media queries. Some information on that here ๐Ÿ™‚

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.