Featured Blog: Eye Level
Featured Blog: K Sarah Designs

Typepad 101: Easy "Sticky" Navigation Bar

Note: This tip requires the use of Custom CSS, which is available to subscribers at the Unlimited level and above. Learn how you can upgrade your account to take advantage of this great feature here.

Today, we're learning how to make your blog's Navigation Bar "stick" at the top of the page. That means that the Navigation Bar will sit right at the top of the browser window and stay in that spot when a reader scrolls down.

This is awesome because it allows you to keep important navigation links front and center. And it's really easy to execute.

This tip works especially well in conjunction with the Theme Builder.

Special note for our Nimble beta testers: We'll have this as a built in feature for you soon, so you don't need to code this yourself.

First, go to Blogs > Design > Content and make sure you have the Navigation Bar turned on and populated with the links you want to use.

Next, check to see that the Navigation Bar is styled to your liking. If you're using the Theme Builder, that's via the Design > Theme Builder page.

Your blog should now look something like this:

Navigation Bar default

Next, decide whether you want the Navigation Bar to span the full width of the browser window or just the width of the blog container.

If you'd like to span the full width of the browser, add this code in Design > Custom CSS:

 #nav {
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
}

#banner { margin-top: 30px; }

When you view the blog after saving, you should see something like this:

Navigation Bar, full browser width

If you'd like the Navigation Bar to be the same width as the blog container, use code like this:

#nav {
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    width: 1050px;
    z-index: 2;
}

#banner { margin-top: 30px; }

The width is width of each column added together. You can see that under General in the Theme Builder. In our example, the main content column is 700 pixels and the sidebar is 350 pixels so that's 1050px total.

The above code will result in something like this:

Navigation Bar, blog container width

And that's it! Our Knowledge Base has even more tips for styling the Navigation Bar with Custom CSS.

comments powered by Disqus