August 5, 2013

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




Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.






Related Posts and Categories


Category, , , ,





Comments

* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.


Bren Lee said...

OMG, you don't know how badly I needed this when I had a blogger blog! Ugh, now you make me want to move MGP to Blogger and not wp.com :/ Bookmarking this for later use! Thanks Mayura!

Mayura De Silva said...

Hi Bren,


Really?! I didn't know you were seeking. I had it written few months ago but scheduled to post this month :)

Aha... I hope you will take a better decision on moving your MGP to a free platform dear :) Hope this one will come in handy if you gonna stay with Blogger.

Thanks for coming by and contributing your thoughts Brenda :)


Cheers...

Harleena Singh said...

Hi Mayura,

When I first scrolled down the post - I literally closed my eyes seeing SO many codes - something I'm really scared of...lol :)

Honestly speaking, I am with Bren here - I wish I had a blog on Blogger too, or that I hadn't shifted them to WordPress, but only if I'd known you earlier, or else I would forever be lost! I really had NO idea as to how to go about and make such changes, and always used to go in for the ready-made templates and stuff that's already present. Or perhaps I didn't know that you can really make so many changes to Blogger blog also.

I must share this one too, just as I share others with my friends, because I know it would help so many who are using a Blogger platform.

Thanks for sharing. Have a nice week ahead :)

Bren Lee said...

It's been awhile Mayura but yes, when I was using blogger, I really needed this. I think I'm moving MGP to blogger instead of wp.com so this tutorial will come in handy very soon! :) Thank you!

Barry Wells said...

Hi Mayura,


As you know I'm on WordPress, but when I first started using it (on my old theme) I couldn't fathom how to add a navigation panel of my pages across the header. I used to place them all in my sidebar and found they were hardly ever being used.


Fortunately I changed themes and found that I can simply add them across the top when I create a new page, unless I want to hide it of course ;)


Trying to add navigation to Blogger sounds fairly difficult if people had to try and apply it themselves. But they don';t need to because your post takes them by the hand and guides them right through it.


Excellent post Mayura, I love that you cover so many aspects of blogging to help everyone :)


Have a great week mate,
Barry

ArtaGene said...

Neat...I have about 20 Blogger blogs, but one in particular will be glad to remove the navigation from the sidebar to a top tabbed menu!
I took the easy way out, saved the page as webpage complete in my How To Do Its folder for a quick reference....

Between you and Barry, I'm becoming a fix it yourself expert!
(If I have the cheat sheet from the right expert).....


Thanks Mayura for another very helpful share!



C. aka ArtaGene

Donna Merrill said...

Hi Mayura,
As you know I'm a WP Gal. But reading through this makes me want to change to Blogger :( I guess three years ago WP was the way to go according to the mentors I had hired. But now, three years into blogging, and following YOU, I notice that blogger came a long way and has grown in their flexibility.
I just love the way you teach! When I first came here I said YIKES! But you always have that step-by-step learning process you offer.
Just gotta spread this news around for my Blogger friends!
Thanks Mayura!
-Donna

Sylviane Nuccio said...

Hi Mayura,


As you know I don't use Blogger, but looking at your title and post, and knowing that Google owns Blogger I was thinking that your blog and posts, must rank very well, since they are always so useful to the reader.


Wow, all this coding is intimating to me :)


I will share you post as I'm sure some people this this information.

Mayura De Silva said...

Most welcome Brenda :) I'm glad I could help with what you have been seeking. Happy navigatin' then ;)

Cheers...

Mayura De Silva said...

Hi Harleena,

lol :D Actually, there's only two code snippets needed to implement custom navigation menu. But I thought of explaining core elements, so users can customize it as they need it to be. Now that adds few more code snippets ;)

Absolutely! We can do many changes to our Blogger template and add third party gadgets / widgets eventhough Blogger is a free blogging platform Harleena :) Now I love that flexibility! I agree, that could be risky too.


Anyway, as you got a self-hosted blog, you can do much more than you imagine :) I think designers and developers are much fond of digging into design and other backend features.

I hope Blogger users find this helpful Harleena :) I've got few more requests for this post once I implemented this on my blog.

Thanks for coming over and adding your thoughts on custom navigation and customization dear :)

You have a nice week too!

Cheers...

Mayura De Silva said...

Hi Barry,


You are right mate! Links on sidebar can go overlooked and we don't need it to be cluttered too, right? Hence having navigation at an easily accessible place is very important :)

As you mentioned, Blogger already offers a way to show off pages below the header with new layout templates :) It was enough for me too. But as things get changed, I needed drop down lists too. So here it is ;)


Well, it's not too difficult Barry, but can be worse if they don't know how to :) I hope the instructions are clear enough and they won't find any problem when adding to theirs.


Thanks for coming by, and sharing your thoughts and experiences on Blogger mate :)

You have a great week too Barry!

Cheers...

Mayura De Silva said...

Hi ArtaGene,

Gosh... Really?! 20 blogs? :O I wonder how you manage 'em all though :) I'm always surprised when I hear people managing multiple blogs :D lol...

Glad to hear you are interested in adding a custom navigation menu and hope you will implement ASAP too dear :)

Ha ha... We all learning from each other, aren't we? ;)

Thanks for coming by and sharing your thoughts on this topic ArtaGene :)


Cheers...

Mayura De Silva said...

Hi Donna,


Of course dear ;) I know you love the WordPress platform. Well, if you want to, you can just play with Blogger by creating a blog as it's FREE :)

I think it's not about the best platform Donna :) It's how we utilize and make most out of 'em to fulfill our needs, isn't it? You are right there. Blogger is more flexible than it used to be now :)

lol :D Codes can scary, eh? Harleena mentioned the same too.

Thanks for stopping by and adding your thoughts on this topic Donna :)

Cheers...

Mayura De Silva said...

Hi Sylviane,


Actually, I was shocked when I found that Google owns Blogger, but had no much SEO features like WordPress did. Can you believe it, while Google being the search giant? ;)


We had to edit template and do things manually to assure we are up to par Sylviane :) Now it's not something that everyone would love to do. Gladly, Blogger improved lately and added very useful features to the platform :) Yet way to go!

Ha ha... Coding all over, eh? ;)

Thanks for coming by and contributing your thoughts Sylviane :)


Cheers...

Arleen Harry said...

This is more than I can handle, so I passed it along to my web designer who works on my blog site. We changed our design as we had the design to left as a sidebar and people started complaining. Your best audience and critic is the ones who actually visit your site.

Mayura De Silva said...

Hi Arleen,


Sorry for being late to reply dear.


Ha ha... Well, I get it with the replies I've got earlier :) It seems complicated. But it's just a copy and paste scenario though.

Indeed! If your design kills the user experience, I don't think visitors gonna come back anytime soon. We need to aware that the modifications should improve the user experience and it's all about visitors :)

Thanks for coming over and sharing your thoughts on this topic Arleen :)

Cheers...

Indian Mystique said...

Hi Mayura! Just bumped into your site, but you have some Great tutorials!
Question: is this a better alternative for blogger pages? I want to add subpages to my blog, but the post header details like author, timestamp and labels are applied on every page. How can I fix this? http://orientalspiceandsomechocolate.com greetings Kiran

Mayura De Silva said...

Hi Kiran,

No, it's not an alternative for pages but to the standard navigation / tabs on Blogger :) First you need to set up pages, before you implement the navigation menu though.

Ah... I see post details applied to static pages too. You can look into following tutorial on adding post details below the post title which applies only for your posts ~ How to Display Post Author, Date / Time and Labels Below Post Title in Blogger.

Cheers...

Karen said...

Thanks for the great detail. I really googled this earlier. My navigation on wp is a bit messy. I'm going to try and tackle it though. Your discussion and images are pretty clear.

You make it look easy! Thank you!

Mayura De Silva said...

Hi Karen,


You are welcome :) However, this post is related to Blogger blogging platform, not WordPress dear.

For WordPress, it depends on the theme you are using and you can try accessing Appearance >> Menu from your WordPress dashboard to arrange your navigation as you would like :)

Hope it helps :)

Thanks for coming by and I really appreciate your kind words on this post :)

Cheers...

Karen said...

I am on blogger too! That is where I started, and have recently revisited my original blogger page. I actually tried a few tricks in changing the html tags yesterday.
The whole internet thing is new to me and I am having to jump in and change a few new things as I blog.

It is great to have a reference for how to work with navigation and I really appreciate you sharing your expertise. There are so many options when I googled the term. I simply like your way of presenting it.
Thank you again for making it sound easy and clear cut!
Karen

Mayura De Silva said...

Ah... Sorry Karen :) I thought you are gonna apply it on your WordPress blog. Yeah sure, go on and I hope you would love to have yours bit more customized as you need.

You're most welcome and I'm really glad you found the tutorials are easy to follow dear :) If you got any questions on any post here, they are always welcome.

Thanks again for your kind words too :)

Cheers...

Kreativ Charm said...

lol I agree 20 blogs :o
Managing one,which I just started is hard enough :D

Kreativ Charm said...

Wow this is so kool!!!
I surely have to try it when I have a day to spend coz if I start editing I will land up editing the whole blog :D
Mayura great work!!!I am really glad I found your sight today!
You really do take time for your readers!that's so nice nd thank u :)

Mayura De Silva said...

lol :D Indeed!

Mayura De Silva said...

Hi Dear,


Glad you found the post and related topics helpful for you in this stage :) Hope you give it a try and see how it works for you.


Ah... Taking time for readers is not a waste of time at all :) That's how readers communicate with bloggers.


Thanks for coming by and appreciate your kind words dear :)


Cheers...

Kreativ Charm said...

that's really sweet of u :)
wil drop by in few days again to try out the tabs ^_^
bye 4 now nd keep up the good work :)

Mayura De Silva said...

Alrighty! Thanks for your kind words and encouragement dear :)


Cheers...

Kreativ Charm said...

I am bac again now :)
So I hav understood the coding really well!U explained very clearly!ty...
Is there a way like when u select a particular page(as in label) to change the background of the respective page as well?

Kreativ Charm said...

Hey!!
I would like to use my linked list urls in the drop-down tabs that I am going to create.But if I use the links here, there would be no need to display the linked list widget.So is there a way to just hide it from the blog??
Hope it works out :)

Mayura De Silva said...

Hi Dear,

Very sorry for keep you waiting for a reply here.

I'm glad you could use the coding here on implementing custom menu :) Through settings, you can apply only one background image throughout all the pages.

Anyway, you can show / hide different elements from different page categories. You might able to use same on applying different changes to your pages ~ How to Show/Hide Elements on Different Pages in Blogger,

Hope it helps :)


Cheers...

Mayura De Silva said...

Hi Dear,


You can remove widgets safely from Layout tab. Go to Layout tab and locate the widget you need to remove by clicking on "Edit" link. There you will find a "Remove" button :)


Cheers...

Kreativ Charm said...

thank u :) I wil try it out soon :)

Kreativ Charm said...

Will the label links work after I remove the linked list widget???
thank u again :)

Mayura De Silva said...

Yeah, of course dear :) Label links won't affected by removing the widget.

Mayura De Silva said...

You're welcome :)

Cheers...