Get your blog off to a great start with the Power Launch Service
Guest Stars: Why TypePad Pro? Video

CSS Hack: Move Your TypePad Navbar Above the Banner

Yes Virginia, you can move your navbar above your banner! (What's a navbar?)

Here's how:

The default arrangement for your blog is

  1. Banner stacked on top of
  2. The navbar (if there is one) stacked on top of
  3. The content and sidebars
  4. The footer (if there is one)

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

Navbar-up-0

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:

Navbar-up-1

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.

Navbar-up-2

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:

Navbar-up-3 

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!

comments powered by Disqus