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

Todays tutorial is a simple CSS styled drop-down menu for Blogger. I have a previous tutorial here for the exact dropdown menu used on misseblog (demo).

The problem is, because I styled it to look like the menu on misseblog as requested, some people found it difficult to customise further so I decided to create this simpliar tutorial on how to create a dropdown menu which can be styled using the Template Designer (Template > Customise > Tabs Background & Tabs Text) to make it easier to fit your design.

Add the menu

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

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

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

Add another dropdown category

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

Add another link

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

Add the CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Dropdown menu not visible?

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

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

Header not full width?

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

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

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

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

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

Elements losing styling/CSS when moved above header

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

move-header gadget

243 Comments

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

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

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

~Rose

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

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

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

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

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

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

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

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

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

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

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

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

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

Hi,

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

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

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

Please help ๐Ÿ™

Thank you! x

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

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

Thanks again!

Hello!

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

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

Thanks so much for all your tutorials!

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

Thanks for your help!

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

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

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

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

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

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

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

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

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

The CSS code is still exactly as you wrote it.

Any ideas?

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

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

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

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

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

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

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

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

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

Hey Ellie,

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

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

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

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

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

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

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

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

Hi Ellie

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

Just a few questions:

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

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

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

Thanks!!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

xx,
K

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

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

Thanks in advance!

Hi!

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

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

Thanks ๐Ÿ™‚

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

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

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

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

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

Hi!

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

I’m not sure what to do next…

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

Please rescue me!

Thanks,

Ashley

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

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

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

Thank you!!
Charmaine

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

Thanks,
nuw

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

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

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

UPDATED TO ADD:

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

Thanks again for you amazing tutorials.

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

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

Thanks!

Hi Ellie,

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

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

Thank you again!

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

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

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

Hi,

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

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

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

Thank you! Your page is immensely helpful.

Miranda

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

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

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

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

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

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

Thanks, M x

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

Hiya… please would you help me?

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

please help ๐Ÿ™ xx

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

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

Thank you so much in advance!!!!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

xxx

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

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

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

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

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

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

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

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

Thanks!

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

Please help…

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

Hi Elaine,

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

Thanks in advance,
Heather

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

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

Any idea what has gone wrong here?

X

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

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

Please help.

Siena

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Guten Tag,

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

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

Mit freundlichen GrรผรŸen
Yamini Zouren

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