CREATE A DROP DOWN NAVIGATION MENU ON BLOGGER

I’ve been getting a lot of questions this week regarding navigation so the next few posts will focus on different navigations and menus you can create for your blog. Navigation is one of the most important elements to consider when designing your blog. Todays tutorial will show you how to create a drop down navigation menu on Blogger. You can see an example of this over onMisseblog. 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 onmisseblog. 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.

ALWAYS DOWNLOAD A BACKUP OF YOUR TEMPLATE BEFORE EDITING CODE

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?

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.

RELATED POSTS

• Create a horizontal navigation menu using images
• Create a basic navigation menu and edit the design of page tabs
• Remove borders from page tabs

Want to advertise your blog, site or shop