How to add a navigation bar

Today i will show you how to add navigation links just below your blogs header like mine above and it depends what template you are using but it will fit most so always use a test blog before you apply it to your current blog as I'm not responsible if you mess your template up and there is lots of different styles you could have but I'm going to show you how to add a simple set of navigation links so first we need to copy the following CSS code



/* navigation links css code
----------------------------------------------- */
#topnav {
height:40px;
}
#topnav ul {
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
#topnav a {
padding:3px 7px 3px 7px;
float:left;
text-decoration:none;
color:#000;
margin:9px 10px 0 0;
}
#topnav a:hover {
color:#666;
}
#topnav li {
display:inline
}


Now paste it like i have done just below the closing skin tag



Now you need to copy the following XHTML code changing the red parts to where ever you are pointing your links to. The first part with the / points to your blogs homepage



<div id='topnav'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Link 3</a></li>
<li><a href='#'>Link 4</a></li>
</ul>
</div>


and paste it just below the header closing div tag like I've done below




now if you preview your template you should see some links just below your blogs header like mine below



you can change parts of the CSS code to make different navigation styles you should make a test blog and play around with the CSS code to see what you can come up with this is just a simple one

61 Responses to “How to add a navigation bar”

I seriously admire your efforts, not many people go the extra mile to css their layouts. I will be using some of your icons and tips in future.

Thank you!

Very useful information - this is exactly what I've been searching for.
I used your method and it works great!

Only question left: How does one get a background for this? I've tried different ideas to get a background for mine and I can't. I notice you have a red one to match your blog title.

Anonymous

June 15, 2008

Thank you this was very helpful.

Anonymous

June 23, 2008

thank you for the wonderful tutorial. i'd like to say that all i know of CSS and XHTML, i've learned here :)
but i'm curious...how do we add links to the tabs we've just created?

Thank you for sharing how to get the nav bar up...now how ca I get that to be that when i click on one of the nav bar links ; ie Contact me, that it will go to that page?

www.womenvoters2008.blogspot.com

How a bout adding links blend into the Header image??

For some reason my navigation links are appearing below the fold. Plus their stacked vertically rather then horizontally.

I'm currently using a 3-column Scribe template for the new Blogger.

r.j you may have some other CSS rules overriding the one's i gave in the tutorial what is the url of the site you are trying to apply them to ? i need more details.

Hi .. that helped a lot. I'm very new to blogging though and now that I have the links up, they are there, but how do I get them to go to where I want them to go? If you click on it, it goes nowhere (of course I haven't told it how) but you left me hangin :)

@janaMarie
change the red # to the url you would like to point to for example

<li><a href='http://www.google.com'>google</a></li>

Ah I got it.. Now I have another question. It worked (THANK YOU) but the text is black and so is my background. Is there a way to change the color? Or put a light strip underneath the text? Also, is there a way to put it above my header?

You rock!

very helpful !! thanks a lot

thanks so much you explained everything so well!!!
i tried doing this with someone elses site explaining, but it didnt work but then i came here and you explained it heaps better than everyone elses site i saw

This wasn't too difficult and it looks great on my site! Just what I needed! Thanks!
http://howtomakeeasycash.blogspot.com

Anonymous

May 28, 2009

Your instruction is effective. However would you tell please how to change the navbar background colour?

Halim
http://cellphonecentre.blogspot.com

@Halim
if you are using the codes shown it the tutorial add a background rule to the CSS as shown

#topnav {
height:40px;
background:#f00;
}

in the CSS above i have set the background colour to a red colour change the hex code to whatever colour you want here's a link to some hex colour codes to get you started

Anonymous

May 28, 2009

Hi, Lawny thanks for your prompt reply and I already changed the color by following you. Can you do one more thing for me. How to omit the extra space between below the header and up of menu bar from my below blog?

http://wirelessphonereviews.blogspot.com

Anonymous

May 28, 2009

Thanks Lawny I am glad to get your prompt reply. I am sorry that I am bothering you aagin

@Halim
i'm not sure which space you are talking about

Anonymous

May 28, 2009

You see between long rectangular narrow line and my navigation bar in the middle of these two point there is a green space I am talking about that space. how to remove that space?

Here is my blog address
http://wirelessphonereviews.blogspot.com

@Halim
the codes you are using are different from the one's described above so i don't have time right now to look through your code but you could try .descriptionwrapper{display:none;} since you are not using the blog description it will hide the div and p tag and close some of the space but it will still need tweaking more also some of your CSS code is invalid such as display:yes;

Hey it worked and all but when i typed in what i wanted the link to be called it called it something different. I think i know why this other thing happened but ill tell you anyway. I click on the link and it says that it can not find the page i was looking for. I think this is because i dont have a post called that, but the Home link still works and i dont have a post called that.

Sorry to bother you but i've done everything you said on your tutorial but only the first and the last link work. if you click on any of the other two it goes onto a screen saying it cant find the page i was looking for. The other two work because they are called Home and About Me. When ever i click on them it stays on the home screen. one of my posts is called about me and the other is called Note:

dont ask me why.
Please help!

Reanna4eva.

@Reanna4eva
you need to create the post on your blog then publish it then visit the post and copy the link from the browser's address bar or right click the post title and if you are using firefox choose "copy link location" or "copy shortcut" if you are using internet explorer and replace the # with the actual link

Mater how to bold the text i want to bold the text nav. :) thanks for the help your tutorial is so helpful especially for me beginners :)

@saintghost
add this code to your #topnav CSS font-weight:bold; so it becomes

#topnav {
height:40px;
font-weight:bold;
}

you could make it bolder by using code below

#topnav {
height:40px;
font-weight:900;
}

thank you so much master for helping me :) www.saintghostrip.blogspot.com your the best master.

master how to put additional navigation bar under navigation for example: Anime, if you click Anime it will display another bar of list of anime. thank you :)

@Anonymous
I'm not sure what you mean

Hey,may I know how do you change the colour of the font? thanks!

xoxo

@Bundle.Of.Joy

look for the following CSS code

#topnav a {
padding:3px 7px 3px 7px;
float:left;
text-decoration:none;
color:#000;
margin:9px 10px 0 0;
}

change the colour hex code to whatever you want here's an example of red text

#topnav a {
padding:3px 7px 3px 7px;
float:left;
text-decoration:none;
color:#f00; /* colour of links */
margin:9px 10px 0 0;
}

master i apply the navigation bar you teach us, under the navigation bar is HOME,CONTACT,LINK3,LINK4 but for example i will change the LINK3 to ANIME and i would like to have another navigation under ANIME so that if i click the ANIME navigation i will choose what anime episode i want to view.

@saintghost
do you mean dropdown navigation menus ?

i don't know the name maybe like that dropdown navigation menus can you teach me? sorry for disturbing master :(

Thanks . This was really helpful.

@saintghost
i will write a tutorial showing you how to add dropdown menus as soon as i get time

owkie master thank you and more power. saintghost

Thank you so..so much!It's perfect!Now I'm figuring out the rest like color etc.I'll get back when all is done.Right now, I'm so happy to see the nav bar!:)BTW,I'm your 100th follower!:)You have great tutorials.Thanks for sharing.
http://on-secondthoughts.blogspot.com/

appreciate this...definitely used on my blog =]

Thanks so so much I have been looking everywhere for this. I changed all the colors but I was wondering if there is a way to put a border around the bar.

It looks awesome, I changes all the colors but is there a way to add a boarder to the bar?

@Anonymous
to add a border around the navigation bar use CSS like so

#topnav {
height:40px;
border:1px solid #f00;
}

Now when Itried this i have the same problem as RJ

@EllyAli
what is the url of the site you are trying this out on ?

Hi Lawny,
I'm trying to add a navigation bar in the header border. I am using the "old" blogger template. And I dont have a "closing skin tag". Can this work still?

www.siying.blogspot.com

Thanks!

Hi Lawny,

Sorry its me again. I realised perhaps I could have the navigation bar u have at the very top of this website "home/about/contact/archives/free templates/posts/comments/email/twitter"

Could you share with me how do you do that?

Also, after the bar is created, how do add the content to say "About"?

Thanks again!

@siying
yes it will work with the old classic blogger templates

Thanks Lawny,

Mine does not come with a "closing skin tag". Where should I add those html codes?

@siying
put the CSS code just after the <style type="text/css"> tag and the xhtml code goes wherever you want the navigation to appear you can try putting it just after the <div id="content"> you might need to tweak the CSS code a little bit

This awesome and works great! Thanks! Wondering how to center it....tried replacing the code but didn't work.

Never mind, I figured it out! Thanks!

Well, apparently Nicole figured out how to center it, but I can't...please help :/

Thank you very much. I was looking for this for my new software downloads blog. You are great.

hello lawny
I had once again try it to add a navigation bar at top of the header as the one you have "Home/About/Contact/Archives/Free Templates"
I am using your "3 column orange style blogger template" and want to have a navigation bar at top of header as same below the header.help me.
thanks

@great99
sorry i dont have time right now to explain how it is done

I think we can also ad navigation bar through...
html widget.Code for

<a href="home.html">home</a>|<a href="contactus.html">contactus</a>
<a href="aboutus.html">aboutus</a>

It would not so fancy but easy to implemet...

It works & that's exactly what I was looking for! Many thanks

Can the navgation bar be added inside the header? If not, how can we center the links? I tried changing float:left to float:center but that didn't do it.

How do I make drop down links for the navigation bar, say I want it to say 'websites' then drop down with a list, how do I do that?

Hi thanks for all the trouble to show evryone the navigation bar.

Could you help me if I want to add google adsense links in teh navigation bar, how do i put the adsense code ?

thanks... this is what im looking for... here's my site http://justjuncci.blogspot.com/ please i need constructive criticsms..thanks pals

Leave a Reply

Comments are moderated before appearing on site, comments that contain suspicious information, self-advertising or spam-like URLs will be deleted.

Note: only a member of this blog may post a comment.

Copyright © 2019 All Rights Reserved | Privacy Policy | Disclaimer Design by LawnyDesigns | Powered by Blogger