11 July 2008

How to add a horizontal navigation bar or menu to Blogger?

Advertisements

We have seen a horizontal menu or a navigation bar on many websites and blogs especially the wordpress blogs.But very few Blogger blogs have a horizontal navigation bar like we have here at our blog.



Here are some simple steps for setting up a Horizontal Navigation Bar -

Step 1.-Dashboard > Layout > Edit HTML. Here find this - /* Header */

Step 2.- Add this code below that -

#menu ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}

#menu li a{
color:#dfffed;
}

#menu li a:visited {
color: #57E964;
}

#menu li a:hover {
color: #F88017;
background: #ffff66;
}
You should edit this code after step 6,so that you could know how does it looks like.

(Edit margin values for placement,and various html color values below for respective colours.)

Step 3.- Find this -
b:section class='header' id='header' maxwidgets='1' showaddelement='no'

Step 4.- Change -
  1. showaddelement='no' to showaddelement='yes'
  2. maxwidgets='1' to maxwidgets='4'
Save template and go to Page Elements.

Step 5.- In the Header , Add Page Element > Add HTML .

Step 6.- Leave the title Blank and add the following code in text field -
<div id='menu'>
<ul>
<li><a href="Your URL">Home</a></li>
<li><a href="Your URL">Advertise</a></li>
<li><a href="Your URL">About Me</a></li>
<li><a href="mailto:YOUR EMAIL ADDRESS">Contact</a></li>
</ul></div>
Add your desired values in above code marked red. Save it.

Now you can edit the code in Step 2.

Check this - How to add Drop Down Navigational Menubar with Submenus

Related Posts

112 comments

July 20, 2008 at 6:53 PM

Hey, great advice. I managed to get my labels working but I wanted them to look more like tabs rather than the way it is now.

I would appreciate if you could give some guidance. Many thanks.

Actually wanted to implement CSS menu using this link but it's too complicated...sigh.
http://hoctro.blogspot.com/2006/09/tweaking-new-blogger-turning-labels.html

My Blog:http://wonderwealthwisdom.blogspot.com/

August 24, 2008 at 7:31 AM

AWESOME Steps. Thanks for being such help I did a test blog to figure it out before I messed with my personal blog.

Thanks again for posting this.

August 24, 2008 at 7:53 AM

Jess you are always welcome.....ask me anytime if you want any help... :-)

September 28, 2008 at 6:20 AM

this, simple code that i ever meet...


thanks allot

October 18, 2008 at 4:42 AM

Excellent work
i am looking for some help to add categories on right side in blogspot. can anybody let me know how to do it??

October 19, 2008 at 8:08 PM

@ craft-sana .....you can get it here -

http://www.webmasters-forum.org/blogger-forum/225-how-add-categories-blogspot.html

November 21, 2008 at 10:19 PM

For some reason my menu seems to be vertical rather than horizontal. What could I be doing wrong?

November 22, 2008 at 4:53 AM

Do you have add the given code properly ?
Check for

"display:inline;"

March 12, 2009 at 2:35 PM

Thanks for the tutorial...great job

Anonymous
March 20, 2009 at 5:39 AM

Awsome. Very simple. it works very well

April 20, 2009 at 4:15 AM

thanks for this simple horizontal navigation menu.. however it appears centered and i want it aligned left.. can i add somewhere a align left rule?

April 20, 2009 at 6:02 AM

@ Haneey, add this style tag -

style="float:left;"

to code in STEP VI, so that it will look like -

<div id="menu" style="float:left;">

hope this will help :-)

April 25, 2009 at 1:36 AM

Thanks for this. So much easier to do. Now how do you get your post to go under the right heading under the navigation tabs so that when people click on it they'll be taken to the right place?

April 25, 2009 at 9:36 PM

@ JamericanSpice, you can add link to that post by editing "href=" value in code while adding it to your gadget.

April 29, 2009 at 9:57 AM

Hi! Thanks for the great post. I have a few additional questions. I got my horizontal Navigation Bar up on my blog, but how do I link the tabs to my labels? For instance, I would like my clients to be able to click on the Maternity tab and it bring up a page with all of my Maternity shoots. Is this possible? Also, The Navigation Bar came up this ugly green color how do I change the color of it? And my last questions is can I get a solid bar going all the way across connecting all of the tabs like on this blog http://www.tarajanephotography.com/

This is my blog if you need to take a look at it.
http://melmurrayphotography.blogspot.com/

Thanks!

April 29, 2009 at 11:49 AM

I asked a few questions before, but I was able to figure out a few on my own (for instance how to link my labels to my navigation bar and to change the color of the ugly green) But I wonder how to get my navigation Bar to have a solid bar going across my page like these two blogs...
http://wonderwealthwisdom.blogspot.com/
http://www.tarajanephotography.com/

mine keeps coming up like this no matter what I change...
http://melmurrayphotography.blogspot.com/

Thanks for such a great tutorial. I appreciate any additional help you may be able to give me!

Melinda

May 1, 2009 at 8:30 AM

Hi Melinda Murray

Do you want color in background of your navigation bar?

Melinda Murray
May 1, 2009 at 9:59 AM

Yes, I do would like a solid colored bar going across my page just like the other two blogs that I posted in my previous post. Do you know how to do that?

May 7, 2009 at 7:53 AM

you have to do some experiments with html color codes e.g. #dfffed

May 14, 2009 at 1:42 PM

can someone help me please the promblem i have is navigation buttons comes as a list but i dont want this to happen i want it to be across how it normally looks like

May 14, 2009 at 11:16 PM

please check you added this tag or not
'display:inline'

This tag is used to make any list horizontal.

May 15, 2009 at 10:58 AM

Well thanks for your reply i sorted out this promblem but i need help the links that i'm going to add to my button like how do i create a link EG: http://cskolchitv.blogspot.com/2009/05/ccsports1.html and then include a multimedia file on that page

May 15, 2009 at 11:41 PM

You want to add link to your button?

May 18, 2009 at 8:51 AM

How would i change the width of each link of my nav bar? I'm using a custom font & with the length of the text it is making eachlink 2 lines of text tall.
http://www.princesslaladesigns.com/

HALO
May 19, 2009 at 6:51 AM

If the button is short then it will appear on single line. I checked your links appear on single link.

May 30, 2009 at 12:42 PM

Thanks for posting these instructions. They are very helpful. As others, I am having problems with my navigational bar appearing vertically under the header. The "display:inline" does appear in the code. Does my centered header have any effect on the navigation bar?

May 30, 2009 at 10:34 PM

@Tammy whats your blog's url?

April
June 2, 2009 at 12:18 PM

I left aligned my nav menu, but there's still about a half inch of white space on the left side. Any ideas how to remove this white space? Thanks so much for great SIMPLE instructions!

April
June 2, 2009 at 12:19 PM

Oh, my url is mrrosey.blogspot.com

Sorry!

June 6, 2009 at 1:04 AM

visit
http://medimania.blogspot.com/2007/06/rosenthals-room.html
then answer here.

July 15, 2009 at 12:02 PM

Hi,
I've recently gotten addicted to blogging..so trying to make my blog as nice as possible (in my opinion...XD). Now i've followed these steps and they came out great. But the problem is the words are obviously not centered.

here's my blog: www.hiddenrebellion.blogspot.com

pls take a look and tell me how i can make the whole thing centered.

July 16, 2009 at 12:31 AM

add this style tag -

style="float:center;"

to code in STEP VI, so that it will look like -

<div id="menu" style="float:center;">

July 18, 2009 at 9:36 PM

I can't seem to get my text centered once I create the navigation bar. I tried your code, but no luck. Any idea what might be wrong?

Thanks!

collegerecipebox.blogspot.com

July 20, 2009 at 2:04 AM

read the above comment

July 24, 2009 at 4:07 PM

THIS IS AWESOME THANKS

July 29, 2009 at 2:03 PM

Hey! great tutorial to making a horizontal menu...
is there a way to use images instead of text in the tabs?

July 30, 2009 at 8:11 AM

It can not be done. If you get solution share it here.

August 31, 2009 at 4:01 AM

Thanks for that. I have been looking for how to do that all weekend. Two questions: how do you change the font of the text and how do you put a background colour behind all the links. So it looks like its sat in box?

September 1, 2009 at 12:14 AM

You can experiment yourself.

To change font size make changes in
font-size:100%

To change background ulter
background: #ffff66

Get color codes here

http://free-blogger-help.blogspot.com/2009/02/get-html-color-code-values.html

Anonymous
September 3, 2009 at 1:04 PM

Help!!! I've tried this to the tee, and everything works and looks like it's supposed to...except my links don't work! Here's an example:

If I have my "About" tab set as "www.website.com/2006/01/about.html", it DOES take me to this link if I click on it. But then once I'm in this page and if I were to click on "About" again, I get this "www.website.com/2006/01/2006/01/about.html"

What gives? this happens with every link I've tried.

September 5, 2009 at 3:07 AM

www.website.com/2006/01/about.html

what is your actual URL?

September 6, 2009 at 9:03 PM

Hi!

Thanks for your tutorial, it is great for a not-so-computer-savvy person like myself!

Questions:

1) How to I make my navigation tabs link to a web page?

2) I saw this questions previously, but couldn't see a direct answer. How to I make a solid color bar behind the tabs that spans the width of the page?

Thank You!

September 8, 2009 at 7:12 AM

@Heidi
It will good to know your URL.


1) How to I make my navigation tabs link to a web page? >> See Step 6 in main post.

Pandu
September 9, 2009 at 7:20 AM

But how to align it in the left

September 9, 2009 at 7:34 AM

@ Pandu

WHAT?

September 17, 2009 at 3:30 AM

How do I add more buttons to the navigation bar

September 17, 2009 at 6:24 AM

@ The-OnlyFour

Look at Step 6

Add following code

<li><a href="Your URL">Title</a></li>

before

<li><a href="mailto:YOUR EMAIL ADDRESS">Contact</a></li>

September 26, 2009 at 3:08 AM

Great steps, this is the first tutorial that has actually helped me. I have one question, mt navigation bar is above my blog banner I would like it to appear below, how do I do that?

My blog is: http://ellainspired.blogspot.com

September 26, 2009 at 5:22 AM

@ Ella >> I checked it. One Suggestion- You are using old blogger theme/template. There are lots of new and very useful templates you can use. Some of them have inbuilt Nav bar. Take a look here

http://free-blogger-help.blogspot.com/2008/07/blogger-templates.html

and

http://free-blogger-help.blogspot.com/2009/03/how-to-fix-bx-errors-while-uploading.html

November 1, 2009 at 9:00 AM

loved it and use it so easy! Thanks~

Button
November 5, 2009 at 7:24 AM

Hi I tried step 6 but still cannot add more tabs to my blog, any idea why?

my blogsite: http://buttonbooks.blogspot.com

Thanks!!

November 6, 2009 at 2:18 AM

Add
<li><a href="Your URL">New Menu</a></li>
bellow
<li><a href="Your URL">Advertise</a></li>

Button
November 6, 2009 at 9:48 PM

Hi sorry to trouble you again, i managed to add more tabs but the navigation bar is now vertical. The codes: "display:inline;" is in. Any idea how i can change it to a horizontal navigation? Thanks a zillion!

My blogsite: http://buttonbooks.blogspot.com

November 7, 2009 at 12:58 AM

experiment with
margin:10px;

increase the value

Rory
November 9, 2009 at 10:40 PM

can you please teach me how to put more than one links under a category? Example: Under the tab Categories, I want my readers to be able to see this list; Weddings Engagements Personal and etc

In blogger, there's label right? I want those to appear under Categories.. hope you get what i mean..

November 11, 2009 at 5:16 AM

Do you want drop down menus?

November 12, 2009 at 8:36 PM

Hi there,
thank you very much for this post!
What about this kind of navigation bar: http://blog.inspirit.ru/ ?
Is it possible to put the navigation bar in the left bottom of the header?

November 13, 2009 at 9:05 PM

at the blog you mentioned, the nav bar is same, just some difference in styling, which you can change in step 1 code,....and you can put the navigation bar anywhere you want by changing its margin values in Step 1.

November 18, 2009 at 1:26 AM

I already had horizontal menus as HOME About Me Contact Me...,but I want to add sub menu or sub titles to these tab menus .Ex HOME menu I want to add menu or title like 1:My native land,2:My family,3:My son....ect. How can I do ? Pls help me doing this.

November 19, 2009 at 12:34 AM

Hi khemarak-កំព្រា

Check my new post for it

http://free-blogger-help.blogspot.com/2009/11/how-to-add-drop-down-navigational.html

November 30, 2009 at 12:12 AM

Thank you SO much! This just saved my sanity! I searched for hours to figure out how to add a navigation bar to my blog, and this was the only tutorial that helped me. It is a great tutorial, and incredibly easy to follow! :)

December 1, 2009 at 1:42 PM

i've done all of the steps, including making sure display:inline is there. but mine isn't horizontal. it continues to be vertical, with bullet points. any suggestions?

December 2, 2009 at 1:00 AM

well it works perfectly. Here is another tutorial to add horizontal drop down menu bar
http://free-blogger-help.blogspot.com/2009/11/how-to-add-drop-down-navigational.html

January 28, 2010 at 12:37 PM

I've been looking for how to do this for days, and this is the simplest ever. Thanks a million times.
http://www.luchysmiles.com

March 23, 2010 at 4:28 AM

thanks sir

March 25, 2010 at 9:21 PM

thnku so much steps ver so easy

April 11, 2010 at 7:34 PM

how to have color background on the menu bar? thanks

April 12, 2010 at 12:32 AM

@ i-bridals

You will like this
http://free-blogger-help.blogspot.com/2009/11/how-to-add-drop-down-navigational.html

October 11, 2010 at 6:41 PM

thanX orks fine & simple.
http://uninorinfo.blogspot.com

October 11, 2010 at 11:22 PM

Hi drraman,

The code works great! Thanks so much for sharing. I have a question though.

The menu seems to be centralised, I would like it to be flushed left. I've tried adding 'text-align:left;' to the css, but it's not working.

Wonder what I'm doing wrong? Can anyone help?

October 12, 2010 at 12:15 AM

@ Cheryl, add this style tag -

style="float:left;"

to code in STEP VI, so that it will look like -

<div id="menu" style="float:left;">

hope this will help :-)

October 12, 2010 at 12:45 AM

Wow that's fast, thanks drraman!!

It kinda works, it's flush to the left now, but is too far out and not aligned with the main header.

Help? > . <

October 12, 2010 at 3:16 AM

@ Cheryl

I need demo

October 12, 2010 at 4:28 PM

Here's my mock site
http://curiouslittleblog.blogspot.com

October 13, 2010 at 7:49 AM

I've fixed it! It was the width and alignment which I got wrong. Thanks for your help anyway drraman, I really appreciate it :)

May 6, 2011 at 7:39 AM

I know this post is old...but...is there any way to change the font face?

I tried putting
"font-face: calibri" under "font-size: 100%" but that was just a guess.
Any help would be amazing. Thanks!

May 6, 2011 at 11:37 PM

Dear Lucy & Koda

Use this code

<FONT FACE="Old English TEXT MT,Comic Sans MS,Arial">

May 16, 2011 at 2:26 PM

Hello! I followed the code exactly and everything went perfectly, except I can't figure out how to change the tabs from grey to white. Can you please help with this? My url is twobobbinslater.com

Thanks!

May 17, 2011 at 12:48 AM

Try to change the color code values given in the step 2.

May 17, 2011 at 8:26 AM

Aha! I figured it out, I had to change the template. :P Thanks for your help!

May 24, 2011 at 2:16 PM

Omg!!! Amazing! I figured it out! You're amazing. The only confusing part of this post was when it came to linking to the labels. All you need to do is go back to your HTML javascript widget and insert right url for each label. To get to that, just click your label in dashboard and copy/paste the url.

Cheers Draaman

PS: I would like to get rid of the little white line between my labels, any way you can help me with that? www.textureandraw.com

May 24, 2011 at 11:47 PM

@ Ria Burgess

In your color change the hover color #ffffff to #f5f5f5

July 23, 2011 at 2:50 AM

this really helps me drraman

August 20, 2011 at 7:18 AM

its cool but how do I link the tabs to my labels? each time when i have a new post will i have to post on the main page then copy the link ofthe post and add it to the html?

August 21, 2011 at 12:22 AM

You can easily link the labels
e.g. On this site

http://www.blogger-help.com/search/label/Navigation%20Bar

You do not need to place links every time when you make a new post just give it a label.

Dr.Raman,
I have a question, I managed to create a nice menu bar like this in my blog : http://hellotamanh.blogspot.com/
However, I want all post related to foods foods will be under food menu,
and anything related to travel will be under traveling menu
but I am unable to do that

and pls disregard my nickname
thank you

September 3, 2011 at 1:57 AM

it's easy just add labels to your posts. e.g. If you post about food then give the label "Food". And put the label link into your menu.

October 11, 2011 at 2:50 AM

hey it works,n thanks a lot 4 such a great workdone..

October 14, 2011 at 2:07 AM

Hello, I have created a blog http://www.dreamsinaction2011.com/ and I would like the category of "INCRIPCIONES!!!" in the horizontal menu to be in a different colour (orange for example),...could you help me? Thanks,

October 15, 2011 at 12:17 AM

Hi iratxe
View: http://forum.bytesforall.com/showthread.php?t=1261

November 1, 2011 at 4:22 AM

i am unable to get the horizontal menu bar for my blog http://elli-itsmylife.blogspot.com/ .its showing errors.:(:(:(

November 1, 2011 at 5:36 AM

Hi Elvira Lobo(Elli)

It is the easiest menu bar to install. Please add the all codes very carefully.

You can also try other menubars:
http://www.blogger-help.com/search/label/Navigation%20Bar?&max-results=6

November 7, 2011 at 1:04 AM

thanx so much for the reply.....yipee finally got horizontal menu bar for my blog

November 10, 2011 at 7:52 PM

how put the code to my blog?

November 11, 2011 at 10:47 AM

But your menu bar doesn't highlight which link is being shown like mine does. If you want to know how to do this, contact me on my website.

Anonymous
December 8, 2011 at 6:27 AM

Hi, i know this is quite a dumb qns but i go to dashboard and click layout but i couldn't see 'edit HTML' anywhere. Can anyone help me on this?

December 8, 2011 at 10:45 PM

Hi Anonymous

If you are using Old Blogger dashboard, then go to Design >> Edit HTML

If you are using New Blogger dashboard then go to
Templates and click on Edit HTML option just below the Live on Blog.

January 3, 2012 at 11:36 PM

hi i am new to blogger, i would appreciate your suggestions for my blog. my blog address : itandbpo.blogspot.com , kindly have a view and let me know if any suggestions for better working are there.

thanks

January 4, 2012 at 1:13 AM

Read abt the Blogger hacks from this site and add them to your website

Also this will helpful
http://www.blogger-help.com/2010/09/how-to-turn-your-blogger-blog-into.html

January 20, 2012 at 4:47 AM

Mine is not horizontal either but vertical pls help me.

January 20, 2012 at 10:57 PM

@Marilie

increase value of

margin:10px;

January 21, 2012 at 4:26 AM

And now how can i put my posts to the links??I read this but not understand it clearly pls see http://www.fashionblover.blogspot.com/

January 21, 2012 at 4:52 AM

In step 6 code add the title of menu and link address to Your URL in red.

January 21, 2012 at 5:39 AM

But i want in one menu ex. outfits to have more than one post...cant this bee done automatically with a url in the post or somethin?

January 21, 2012 at 6:08 AM

Can i put in every post i make a url to connect with a section in the menu. I want to put more than one URL...Thx

January 23, 2012 at 10:52 PM

For that give categories to your posts and add this category URL into menubar as I have done in this website.

emily
February 29, 2012 at 4:48 PM

HOW DO I CHANGE THE FONT STYLE to georgia

March 1, 2012 at 5:50 AM

Hi emily

Add

font-family: Georgia;

just below

#menu ul li{

in step 2 code

Anonymous
March 27, 2012 at 8:01 PM

do you need a server for the navigation bar to link to the home page, about me, etc...?

March 28, 2012 at 6:48 AM

@Anonymous
You do not need server or the navigation bar to link to the home page

March 28, 2012 at 9:18 PM

This so hard to do. I am stuck at STEP 5. I am using the new blogger interface and I don't know and can't find page elements. I have tried to enter those codes from step 5 into my title box and it was too long. Please help!

March 28, 2012 at 9:27 PM

For new blogger interface Go to Layout >> On the right there are Page Elements page.

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More