Add a Navigation Bar to Your Blog

A common feature on blogs is a horizontal navigation bar of links just underneath your blog's banner. Here's a tutorial to show you how to do just that:

Here's the full text documentation from our knowledge base (scroll down to 'Navigation Bar) and, for designers, tips on styling the navigation bar.

Comments

[TAS mania]

being the visual vixen that i am, yippie for your stylin' css tutorial. i'll try some on today. you make us dyi s look pro. thanks andy. . .

[Nav]

Great Tutorial. Thanks- NJ

[Mary Helen]

For some reason all of the links on my navigation bar are directing to my home page instead of where I've set them to. Any idea why this would be happening?

[Andy]

What is your blog's address?

[Brian Hines]

Excellent, Andy. Wasn't aware of this great feature. Just added it. Easy to do. Thanks.

[Mary Helen]

Hi Andy, It is http://scribblenation.typepad.com

[Andy]

Ah - I guessed right - what's happening is the box your banner is inside is 'over' the navigation bar. Here's how to fix it:

Go to Weblogs > (Your Blog) > Design > Custom CSS and paste in:

#banner-header a { height:166px; }

Save and then reload your blog.

That will 'trim' the banner's box from the bottom so it let's the navigation bar links become clickable.

[Mary Helen]

Aha. That did work, but it also removed my background and mushed up the banner. I recently revamped the appearance of my blog based on this post: http://everything.typepad.com/blog/2009/03/typepad-banner-width-margin.html

Is there a way to add the nav bar without losing my current look?

[TAS mania]

would be great if the CSS example included inserting an image as background and an image as link. the other examples are easy to follow.

[TAS mania]

got how to do the image on background by going to topic: Adding background to your blog (CSS) and inserting the code + url ..... now working on image link for nav bar...

[TAS mania]

couldn't figure out how to image link the nav bar...so put in ticket. and wrote suggestion to typepad's knowledge base about giving an example of the code to stylize the link with a image.

[LuAnn Smith]

Can't thank you enough for the tutorial. I had the same problem with the height of my banner so thanks for that info too. My question is can I edit the sequence of my titles. Or do I have to get it right the first time?

[Christopher Ming Ryan]

This is one tip that I did in five minutes and it's going to help send folks to my twitter page, my LinkedIn page and my company's portfolio. Thanks Typepad. You rock.

[Andy]

Rock out! Just what we like to hear!

[Karin at Tennis IDENTITY]

So easy and I love it. Thanks.

[Ginevra]

[this is good] thanks for yet another successful TypePad tutorial video, Andy!

[TAS mania]

got the easy code to add links as images...working on making the stellar buttons, thanks andy for giving me the start to a cool looking navibar. and thanks help desk...

[Louis Parsons]

Great tutorial thanks!

[T]

AWESOME tutorial!!

[Shawn Phillips]

Okay, Okay... Thanks Mr. Andy...

Love that name.

I think I got it. So, what you're saying is, "Make it work how you want and don't go running over to WP for no reason!"

Good point! I've already got $5k in a freakin WP blog that's killing me...

In Strength,
Shawn

[Andy]

Sweet God that's a lot to pay for Wordpress when it is supposedly 'free'!