Wednesday, July 29, 2009

How to add a horizontal navigation bar to your header

horizonmenu From this tutorial, you will be able to add a horizontal navigation bar to your header. As we all know, Blogger’s default templates doesn’t supply this option in it’s gadgets, but we are able to manually add it with html/javascript. Remember to always back up your current existing template before beginning any tutorials in case it doesn’t turn out as expected.

Steps to follow:

1. Login to your Blogger dashboard

2. Go to Layout > Edit HTML (Click on “expand widgets” box)

3. Now search for the following section code: ]]></b:skin>
and add the following section code below right BEFORE it

/* Menu Control
----------------------------------------------- */
margin: 0;
padding: 0px;
font: bold 12px Verdana;
background: #000;


.menu ul{
margin: 0;
padding: 0;
list-style-type: none;

.menu ul li{
position: relative;
display: inline;
float: left;


.menu ul li a{
display: block;
background: #000;
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;

* html .menu ul li a{
display: inline-block;

.menu ul li a:link, .menu ul li a:visited{
color: white;

.menu ul li a:hover{
background: black;
color: white;

Note: You will need to replace the section code in red with your width’s template and adjust the height’s px to fit your style.

4. Next, you will need to search for the following section code:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>

5. Add the following section code below right under it:

<div class='menu'>
<li><a href='http://'>Home</a>
<li><a href='http://search/label/tutorials'>Tutorials</a></li>
    <li><a href='http://search/label/templates'>Templates</a></li>
    <li><a href='http://search/label/widgets'>Widgets</a></li>
  <li><a href='http://search/label/designs'>Designs</a></li>
<li><a href='http://search/label/icons'>Icons</a></li>
<li><a href='http://search/label/fonts'>Fonts</a></li>
<br style='clear: left'/>

Note: You will need to replace all links in blue with that of yours, and all texts in red are texts that will be displayed in the menu bar.

6. Your done! You can also add some designs to your horizontal bar, check out the design section.

Labels: , ,


Blogger savanna said...

How do you center the links?


September 07, 2009  
Blogger Mary Tipton said...

Worked great! One question...How do I make the rest of the background black?


September 09, 2009  
Blogger Zephyr96 said...

this did not work for me. wasted an hour of my time. thanks a lot . . .

March 13, 2011  
Blogger Engineers Zone said...


great work...

March 18, 2011  

Post a Comment

Subscribe to Post Comments [Atom]

<< Home