New! Add a horizontal navigation bar to your blog

Today, we started rolling out the ability to add a horizontal navigation bar to your blogs (one of your top requests!). It’s dead easy to configure and can make your blog much easier to navigate. Look at how our own Michael Sippey used it on his blog:

To set this up on your own blog, go to Design > Content and select the navigation bar and click the pencil on the right:

This feature will be made available to all users on the new platform over the coming week.

There is a small group of you whose blogs are still in the process of being migrated to the new platform (we want to make sure we make the transition as smooth as possible for you) but we should be on track, as Ben predicted, to have everyone on the new platform by the end of the year.

Update 2008-10-29: This Knowledge Base article explains how to use CSS to customize the style of the navigation bar.

Comments

[R]

I went to Weblogs>Design>Select Content.

However, this option is nowhere to be seen.

Am I looking in the wrong place? Is this only available to Windows/Explorer users?

[Account Deleted]

OH I LOVE YOU GUYS... I have been hoping for this for a long time. Woohoo! :)

[Account Deleted]

PS I'm not sure where you're meant to suggest features, but it would be really really brilliant if when you renamed an post title, the post URL would change too. so many times i've saved an post with a crappy title and thought of a better one latter, and it always bugs me that the entry URL is stuck with the crappy one :)

[Blogbüro München]

Since Michael Sippey is having an action stream on his TypePad blog does that mean we will all get action streams soon?

[Erika Verginelli]

How cool! I was really looking forward to this! ;-)

[Sarah Sosiak, TypePad Product Manager]

@Shauna -- Thanks for the suggestion! This is actually a feature we've rolled out in Beta and hope to have available to everyone shortly.

http://beta.typepad.com/blog/2008/10/changing-the-url-filename-of-your-post.html

[Sarah Sosiak, TypePad Product Manager]

@Rana -- To ensure we're able to provide great support to everyone as we roll this out, we'll be turning it on in waves for everyone on the new platform over the coming week. Once we've completed the rollout we'll let everyone know via the yellow-message bars in TypePad application.

(Don't worry...it's available to anyone using any of our supported browsers: http://kb.typepad.com/id/171)

[Sarah Sosiak, TypePad Product Manager]

@Marcus -- Michael has Movable Type's Action Streams running on sippey.com, and built some custom JavaScript templates to build his own widget. He's a geek. But we're exploring how we can bring these kinds of features to TypePad.

[Beth Hayden]

This is cool, but when I tested it, all my links are underlined. Mine doesn't look as good as your example! :) Is there any way to fix this, or otherwise mess with the fonts or colors of the nav bar once you have it set up?

[lizriz]

The nav bar is great, but I do wish we could easily change fonts and how the links are placed across the bar.

[Julie @BalzerDesigns]

How do I get it to look pretty as in the example? Or even centered?

[电加热器]

OH I LOVE YOU GUYS... I have been hoping for this for a long time. Woohoo! :)

http://www.hochi.cn 超音波
http://www.akkb.org/yxdl/ 电炉

[*Staci *]

Thanks. This will work great for me. I have so many links on the sides of my blog my categories were hard to find. Now I can put them at the top. :)

[Zoic]

How would we know if our blog is on the new platform or not?

[Sarah Sosiak, TypePad Product Manager]

@Beth & @Lizriz & @Milkcan -- Are you looking to change the style for built-in themes or your own designs?

[Sarah Sosiak, TypePad Product Manager]

@Travis -- We've added messaging in the application to know when you've been moved to the new platform. You can read about it at http://everything.typepad.com/blog/2008/10/q-how-will-i-kn.html.

[Julie @BalzerDesigns]

Hey Sarah: my own design.

Thanks!

[Sarah Sosiak, TypePad Product Manager]

@milkcan -- If you have a Pro account, you can style the Navigation bar with custom CSS as described in this article:

http://kb.typepad.com/id/1325

[Deliberations Blogger]

This is great -- now, any design hope for those of us who don't speak CSS? I looked at the CSS article and it's just out of my league.

[Debbie Voiles]

Ditto. I want to get rid of the underlines, but I don't know CSS. Also, is there any way to put my email link in the nav bar instead of the sidebar?

[The Typepad Team]

Hey Debbie: if you want to file a help ticket on this, our support team can probably help you more than I can! :)

[The Typepad Team]

Hi Anne:

Give it a try! It's challenging but fun. :) and you can also ask our tech support team for help tweaking it...

[Account Deleted]

I found a glitch with the new navigation bar feature. Help!

Here is the issue: if you have used a custom banner and set the CSS to remove the banner padding according to the directions given (from Knowledge Base: #banner {height: XXpx; background-position:0px 0px;}), the links in your nav bar all point to your main page (like the banner).

How can I use the nav bar AND a custom banner?? Help

[The Typepad Team]

hey Jill - would you be able to go ahead and file a help ticket on this so we can further diagnose the issue?

[Account Deleted]

How can I get my navigation bar show up on each page like Mike Sippey's does? The bar only shows up on my front page.

[Katie Konrath]

I'm not a tech person, so it's taken me a lot of work to figure out how to do some modification to the navigation bar.

I thought I'd share what I've learned so it's easier for others who have a hard time with CSS.

First of all, if you want your links to align right instead of left, use this css:

.nav-list-item
{
float: right;
}

"Text-align: right;" didn't work for me, the "float" command was the only one that did. Make sure you have it in the .nav-list-item brackets.

Also, in the ".nav-list-item a" brackets, here are some clues how to make changes:

text-decoration: can be underlined, strike-though, etc.*

text-transform: This can be used to make all the list items in all caps, or all lowercase, etc.*

color: Use the 6 number code from the regular website design. If you need more options, or have your colors in RGB, go to http://www.drpeterjones.com/colorcalc/ for a converter.

font-family: This lets you pick your font if you want something specific.

font-size: Options are: xx-small, x-small, small, medium, large, x-large, xx-large

font-weight: Options include: normal, bold, bolder, lighter. Also can use numbers: 100, 200, 300...

letter-spacing: How close you want the letters to be together.

* For options on text-transform and text-decoration, search "text-transform css" or "text-decoration css".

Here's also a key to CSS font commands: http://www.w3schools.com/css/css_font.asp

For Typepad, could you explain how to add images in between links in the horizontal navigation menu?

Also, like a previous commentator, I'm having trouble with the links not pointing to the address I set because I also have a custom-sized banner. I've submitted a help ticket as well.

[Ginevra]

Hi Katie - thanks SO much for sharing those CSS hints. I know people will really appreciate it. Let me know if you ever want to do a guest post for us!

The help tickets should be able to help you with the images issue - this is something we can definitely help with. Email me at [email protected] if you want to know more.

[CDI]

This link goes to a TypePad support Tip page with lots of great Navigation Bar formatting info and code samples! http://bit.ly/L1I5

I also have the problem that Jill has with all links going to home page when using custom banner.

Enjoy! @jesseluna on Twitter

[CDI]

Found the CSS adjustment to make the navigation work with a custom header image...

The anchor (< a >) tag needs to be set to the height of the custom banner image. Otherwise, it will be the entire height of the banner + the Navigation area. On my template the banner image is 155px but the #banner-header a value was 185px, so that was also including the navigation. Gotta change it.

Add this code to the Custom CSS section:

#banner-header a
{
height: 155px; /*value = height of custom banner */
}