Create a custom navigation menu with dropdown items on Blogger

create-a-drop-down-navigation-menu
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

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

269 comments

  1. Sarah on

    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! ๐Ÿ™‚

    Reply
    • Ellie M on

      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 ๐Ÿ™‚

      Reply
      • sarah on

        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! ๐Ÿ™‚

        Reply
    • Ellie M on

      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 ๐Ÿ™‚

      Reply
  2. Nia on

    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

    Reply
  3. Shari on

    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?

    Reply
    • Ellie M on

      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

      Reply
        • Ellie M on

          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.

          Reply
  4. jacquelyn on

    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?

    Reply
    • Ellie M on

      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

      Reply
  5. alice on

    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?

    Reply
    • Ellie M on

      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.

      Reply
  6. Jen on

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

    Reply
    • Ellie M on

      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.

      Reply
  7. Elly on

    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

    Reply
  8. Elizabeth on

    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!

    Reply
    • Ellie M on

      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 ๐Ÿ™‚

      Reply
      • Elizabeth on

        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!

        Reply
          • Elizabeth on

            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/

          • Ellie M on

            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.

  9. Sohail on

    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

    Reply
    • Ellie M on

      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

      Reply
  10. Liliet on

    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

    Reply
    • Ellie M on

      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

      Reply
  11. Kelly on

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

    Thanks again ๐Ÿ™‚

    Reply
  12. Daniela on

    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!

    Reply
    • Ellie M on

      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.

      Reply
  13. Dylan on

    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

    Reply
    • Ellie M on

      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!

      Reply
  14. Aman on

    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!

    Reply
  15. Dylan on

    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.

    Reply
    • Ellie M on

      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.

      Reply
  16. Life of Luxonen on

    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!

    Reply
  17. Kim van Gulik on

    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

    Reply
  18. Rosie on

    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?

    Reply
    • Ellie M on

      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;

      Reply
  19. Kim van Gulik on

    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 ๐Ÿ™

    Reply
  20. Krishna Kumar Shrestha on

    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 ?

    Reply
  21. Zorkyto Mykola on

    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?

    Reply
  22. Mary Beth on

    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!

    Reply
  23. Niki on

    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 @

    Reply
    • Ellie M on

      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.

      Reply
    • Ellie M on

      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.

      Reply
  24. Elizabeth on

    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.

    Reply
  25. Dan on

    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.

    Reply
  26. Summer on

    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

    Reply
    • Ellie M on

      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 ๐Ÿ™‚

      Reply
  27. DAN on

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

    Reply
  28. Ace on

    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! โ™ฅ

    Reply
  29. Lauren on

    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;
    }

    Reply
    • Ellie M on

      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;

      Reply
  30. summer on

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

    Reply
  31. mirza on

    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

    Reply
  32. ISRAR RAZA on

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

    Reply
    • Ellie M on

      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;

      Reply
  33. Stephanie on

    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!

    Reply
  34. Jane on

    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.

    Reply
  35. Aliya on

    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 ๐Ÿ™‚

    Reply
  36. Ester on

    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!

    Reply
  37. Amber on

    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!

    Reply
    • Ellie M on

      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 ๐Ÿ™‚

      Reply
      • Amber on

        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

        Reply
        • Ellie M on

          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 ๐Ÿ™‚

          Reply
  38. Alexia Ganotaki on

    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

    Reply
    • Ellie M on

      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?

      Reply
  39. Jean on

    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.

    Reply
    • Ellie M on

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

      Reply
  40. James on

    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.

    Reply
    • Ellie M on

      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;

      Reply
      • James on

        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;

        Reply
        • Ellie M on

          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;

          Reply
  41. Sasha on

    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

    Reply
    • Ellie M on

      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

      Reply
    • Ellie M on

      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.

      Reply
  42. Sarah Laird on

    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

    Reply
    • Ellie M on

      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.

      Reply
  43. Emma on

    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?)

    Reply
    • Ellie M on

      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

      Reply
  44. Jade on

    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

    Reply
  45. sara on

    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?

    Reply
  46. Charile on

    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

    Reply
  47. Sara on

    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

    Reply
  48. shea schaaf on

    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!

    Reply
    • Elaine Malone on

      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.

      Reply
  49. Isabel on

    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

    Reply
  50. Casper on

    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.

    Reply
    • Elaine Malone on

      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!

      Reply
  51. Kristin on

    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

    Reply
  52. Quinn C on

    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

    Reply
  53. Macarena on

    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

    Reply
    • Elaine M on

      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 ๐Ÿ™‚

      Reply
      • Macarena on

        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

        Reply
  54. Athena Chen on

    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!

    Reply
    • Elaine M on

      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.

      Reply
  55. Crystal Marie on

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

    Reply
  56. Yapo on

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

    Reply
  57. kadboss on

    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!

    Reply
    • Elaine M on

      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.

      Reply
  58. Erin on

    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?

    Reply
  59. Cat on

    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

    Reply
    • Elaine M on

      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 ๐Ÿ™‚

      Reply
  60. Eva on

    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

    Reply
    • Elaine M on

      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.

      Reply
  61. Vendela ahlstrom on

    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

    Reply
    • Elaine M on

      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!

      Reply
      • Wesleigh S. on

        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! ๐Ÿ™‚

        Reply
  62. Harvey on

    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!

    Reply
  63. Melissa on

    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!

    Reply
  64. Meg on

    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

    Reply
  65. keren on

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

    Reply
  66. Janeese on

    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

    Reply
  67. Abby Dala on

    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

    Reply
  68. Connie on

    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

    Reply
    • Elaine M on

      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.

      Reply
  69. Ai Lanh on

    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.

    Reply
  70. Iveta on

    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

    Reply
  71. Rabeyah on

    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!

    Reply