So using a test blog with Journal Black theme. Top portion looks like this:

First thing we need to do is give ourselves some room at the top to put the navbar. I go to Custom CSS and add:

/* push banner down */

#banner { margin-top: 40px;}

We added 40px to the top margin of the banner 'box' which pushed the whole thing down:

The number of pixels you end up using may be more or fewer.

So we've made some breathing space for our navbar. Just like we used a positive number of pixels in the margin-top to move the banner down, we're going to use a negative number of pixels to move the navbar up, over and above the banner. I add to the custom css.

/* move navbar up, over and above the banner */

#nav { margin-top: -85px; }

Again the number of pixels you use may be more or less. Note that if you put too many pixels the navbar may actually move off the viewable webpage. It's actually hiding out 'above' the viewable page.

Our navbar kicks ass. It is now above the banner. Only problem though is now the blog content is on top of the banner. In the image above, it's the '08/04/2009' text being way too close to the banner. Need to push that baby down.

Again margin-top to the rescue (not to be confused with muffin-top which is a whole other post). We're going to increase the margin-top to push the blog content back down into place. The box that contains the posts and any sidebars is called #pagebody. Let's move it down so it clears the banner:

/* move content and sidebars down so it isn't on top of the banner */

#pagebody { margin-top: 60px; }

As before, the number of pixels it requires to move everything into its proper place may be different depending on your theme.

And here we are:

The content now has the correct amount of whitespace around it.Here's the complete CSS we added:

/* push banner down */

#banner { margin-top: 40px;}

/* move navbar up, over and above the banner */

#nav { margin-top: -85px; }

/* move content and sidebars down so it isn't on top of the banner */

#pagebody { margin-top: 60px; }

The import thing to remember is to experiment on a test blog before applying it to your live blog. And always ask the TypePad One support team for help. We love this stuff!

More Resources

*After your 14 day free trial you will be automatically subscribed to the services at your subscribed rate. You may cancel your subscription at any time during your 14 day free trial to avoid being charged. Additional information concerning your free trial can be found in the Terms of Service.