How to Add a Custom Navigation Menu in Blogger

Generally, blogs have two types of pages - Post and Static pages. Now, you are on a post page too. Static pages come in handy when you need to display information related to your blog, which may not fit in for usual blog posts. For example, biographies of authors and story behind the blog. Unlike blog posts, static pages may not visible to visitors unless you decide to show them on homepage or somewhere easily accessible. Have you got a navigation menu for your blog?

I've Got One Already

Earlier, we discussed about having and displaying static pages in Blogger. You can either show them as links on sidebar, which may tend to go unnoticed or list them in a typical navigation menu. What if the standard navigation menu is not quite enough to list all your static pages?

As you know, Blogger doesn't offer a multi-level navigation menu. It only has one level and you have to list all your static pages in a single row instead of categorizing them with drop down menus. Ugh... sometimes, all in a row can be weird. Felt like that? Hmm... Limitations!

Ever wished for a multi-level navigation menu instead?

It's Possible!

Yeah, it's possible! But, might seems not easy though. Here, we gonna discuss about adding a custom navigation menu in Blogger to overcome above stated limitations.

With a custom navigation menu, you can categorize your pages and display them in drop down menus too. It will be very convenient for your visitors as they can find and navigate through the pages they have been seeking for. Further, if you couldn't list all your important static pages on the standard navigation bar, you can use drop down menus to display rest of the pages.

What else you could possibly do? I know, you can think more of them. Love to have a custom navigation menu? Scroll down and follow the steps.

Steps:

1. Navigate to Blogger Dashboard.

2. Click on your Blog Title.

3. Jump to Layout tab from left pane.

4. Here you will find all the elements on your blog layout. Click on Add a Gadget link just below the header / first element on the layout.

5. Find and add HTML/JavaScript element from the pop-up gadget list.

6. Now you need to customize following code snippet and place it in the Content text area. To learn about customization, just scroll down until the end of this code snippet.

<ul id="customnav">

<li><a href="[Link / URL]">[Label]</a>
<ul>
<li><a href="[Link / URL]">[Label]</a></li>
<li><a style="border-bottom: 0;" href="[Link / URL]">[Label]</a></li>
</ul>
</li>

<li><a href="[Link / URL]">[Label]</a>
<ul>
<li><a href="[Link / URL]">[Label]</a></li>
<li><a style="border-bottom: 0;" href="[Link / URL]">[Label]</a></li>
</ul>
</li>

<li><a href="[Link / URL]">[Label]</a>
<ul>
<li><a href="[Link / URL]">[Label]</a>
<ul>
<li><a href="[Link / URL]">[Label]</a></li>
<li><a style="border-bottom: 0;" href="[Link / URL]">[Label]</a></li>
</ul>
</li>
<li><a style="border-bottom: 0;" href="[Link / URL]">[Label]</a></li>
</ul>
</li>

<li><a href="[Link / URL]">[Label]</a>
<ul>
<li><a href="[Link / URL]">[Label]</a></li>
<li><a style="border-bottom: 0;" href="[Link / URL]">[Label]</a></li>
</ul>
</li>

<li><a href="[Link / URL]">[Label]</a>
<ul>
<li><a href="[Link / URL]">[Label]</a></li>
<li><a style="border-bottom: 0;" href="[Link / URL]">[Label]</a></li>
</ul>
</li>

</ul>

Color Indication Information:

   - Link or URL of the page

Add the link to your static or external page here

   - Label

Indicate the label you need to show on the menu, corresponding to the link you mentioned.

The above code snippet will render a custom navigation menu with 5 tabs, and each has a sub menu with 2 items listed, as shown in below image. If you prefer, you can increase the number of tabs and sub menu items.

Let's have a quick look at the core code snippet in the custom navigation menu. Here it is,

<li><a href="[Link / URL]">[Label]</a>
<ul>
<li><a href="[Link / URL]">[Label]</a></li>
<li><a style="border-bottom: 0;" href="[Link / URL]">[Label]</a></li>
</ul>
</li>

If you inspect the custom navigation code snippet, you will come to know that there are 5 core code snippets. Hence it renders 5 tabs on the menu.


Add / Remove Tabs

If you need to add more tabs to the navigation menu, just keep adding core code snippet before the </ul> tag as demonstrated below.

<ul id="customnav">

<li><a href="[Link / URL]">[Label]</a>
<ul>
<li><a href="[Link / URL]">[Label]</a></li>
<li><a style="border-bottom: 0;" href="[Link / URL]">[Label]</a></li>
</ul>
</li>

...

<li><a href="[Link / URL]">[Label]</a>
<ul>
<li><a href="[Link / URL]">[Label]</a></li>
<li><a style="border-bottom: 0;" href="[Link / URL]">[Label]</a></li>
</ul>
</li>

</ul>

If you need to remove a custom tab, just delete one of core code snippets as indicated below.

<ul id="customnav">

<li><a href="[Link / URL]">[Label]</a>
<ul>
<li><a href="[Link / URL]">[Label]</a></li>
<li><a style="border-bottom: 0;" href="[Link / URL]">[Label]</a></li>
</ul>
</li>

...

<li><a href="[Link / URL]">[Label]</a>
<ul>
<li><a href="[Link / URL]">[Label]</a></li>
<li><a style="border-bottom: 0;" href="[Link / URL]">[Label]</a></li>
</ul>
</li>

</ul>

Now it's about the construction of core code snippet. The highlighted line of codes represent a custom tab on navigation menu. The part which not highlighted reflects the sub menu and its items.

<li><a href="[Link / URL]">[Label]</a>

<ul>

<li><a href="[Link / URL]">[Label]</a></li>

<li><a style="border-bottom: 0;" href="[Link / URL]">[Label]</a></li>

</ul>

</li>

Add / Remove Sub Menu Items

Having a sub menu is optional. If you don't need a sub menu for a particular tab, you can safely delete the code for sub menu as below.

<li><a href="[Link / URL]">[Label]</a>

<ul>

<li><a href="[Link / URL]">[Label]</a></li>

<li><a style="border-bottom: 0;" href="[Link / URL]">[Label]</a></li>

</ul>

</li>

If you just need to delete only one item from your sub menu, start with the top and remove the specific line as demonstrated below.

<li><a href="[Link / URL]">[Label]</a>

<ul>

<li><a href="[Link / URL]">[Label]</a></li>

<li><a style="border-bottom: 0;" href="[Link / URL]">[Label]</a></li>

</ul>

</li>

In case if you need to add more items to your sub menu, again start with the top and add relevant line of code for more items as demonstrated below.

<li><a href="[Link / URL]">[Label]</a>

<ul>

<li><a href="[Link / URL]">[Label]</a></li>

<li><a href="[Link / URL]">[Label]</a></li>

<li><a href="[Link / URL]">[Label]</a></li>

<li><a href="[Link / URL]">[Label]</a></li>

<li><a href="[Link / URL]">[Label]</a></li>

<li><a style="border-bottom: 0;" href="[Link / URL]">[Label]</a></li>

</ul>

</li>

As demonstrated in the custom navigation code, you can have another layer of menu too - a sub menu under a sub menu item.

For that, place the new sub menu item list just before closing a menu item (</li>). So the new sub menu will be displayed under that menu item as a sub menu.

<li><a href="[Link / URL]">[Label]</a>
<ul>
<li><a href="[Link / URL]">[Label]</a>
<ul>
<li><a href="[Link / URL]">[Label]</a></li>
<li><a style="border-bottom: 0;" href="[Link / URL]">[Label]</a></li>
</ul>
</li>
<li><a style="border-bottom: 0;" href="[Link / URL]">[Label]</a></li>
</ul>
</li>


Now you know how to customize the given custom navigation menu code snippet, and once you done with the customization, you are good to go and save the element.

7. You are almost done! Finally, add following CSS styles to your template.

Note: If you don't know how to add custom CSS to your template, read Easily Add Custom CSS to Your Template in Blogger.

#customnav {
margin-left: -30px;
margin-right: -30px;
overflow: hidden;
}

#customnav li a:hover {
background: #4c5365;
color: #ffffff;
text-decoration: none;
}

#customnav li:last-child > a {
border-bottom: 0 none;
}

#customnav ul {
margin: 0;
padding: 0;
list-style: none;
}

#customnav ul li {
float: left;
}

#customnav ul li a {
float: left;
padding: 10px;
text-decoration: none;
}

#customnav li ul {
left: -999em;
position: absolute;
width: 160px;
z-index: 9999;
overflow: visible;
}

#customnav li ul a {
border: 0 none;
width: 140px;
border-bottom: 1px dotted #cccccc;
}

#customnav li:hover ul {
left: auto;
}

#customnav li li ul {
margin: -1px 0 0 160px;
visibility: hidden;
}

#customnav li li:hover ul {
visibility: visible;
}

Color Indication Information:

   - Hover color of menu items

Set the background color of a menu item on mouse hover.

   - Hover font color of menu items

Define the font color of a menu item on mouse hover.

   - Padding within a drop down menu item

Set the padding within a sub menu item.

   - Width of drop down menu

Define the width of drop down menu.

   - Width of a drop down menu item

Define the width of a sub menu item to be on par with the drop down menu, considering the padding within a drop down menu.

Note: You can easily change the font and background styles by accessing Tabs Text and Tabs Background settings from the Template Designer.

Enjoy :-)