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:

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!

Comments

[Tipper]

Very neat-hope you share more css tricks in the future!

[Account Deleted]

Thanks for this one guys! This is pretty cool. I guess i'll be using this theme already specially now that you have provided this tutorial. However, is there an additional CSS Hack to style the navigation bar? because i tried one using CSS codes but its not working in this theme. Anyways, thanks a lot for this.

[Erick Mott]

Cool

[Andy]

What exactly were you tweaking in the navbar?

Be sure to reach out to the TypePad One support team if you have specific bits you're trying to style.

[Andy]

Working on a really cool one for next week. Can't wait to share it! :D

[Manuel Molina]

Awsome! Love your CSS tips. Typepad rocks!

[Kathryn]

Thanks for this. Per usual, very clear and easy to use. Keep the tips coming; they're very much appreciated.

[twitter.com/miz_ginevra]

testing a comment, logged in as my Twitter-self.

[Account Deleted]

Hello Sir Andy Wibbels, It feels great having a response from you, one of the highly respected professional blogger and prominent Typepad product manager. Well, i want to tweak the whole design of the navbar, i tried using some CSS codes from your Knowledgebase on how to create and style a navbar but it seems the codes are not working on this particular theme "Journal Black". I just wanna know if there's a way to change the built-in navbar of this theme? I always visit your blog and i love the feel of your design. Is it a Journal Black theme? Anyways, thanks a lot Sir Andy, You Rock! Typepad Rock. Keep up the goodwork and more power to the whole Typepad Crew.

[Uncommon Julia]

Lovely!

Now if you could kindly tell me how to align the nav bar center, that would truly kick ass.

[Melanie Nelson]

Does this also work with custom banners? Or only with the default banners within the themes?

[Andy]

It should work with custom banners - youre still just moving the navbar box up, the banner box down.

[Melanie Nelson]

That's what I thought, but I'm not able to reproduce. I've changed the pixels to adjust for banner size and template, but at a certain point the nav bar just disappears. Is this CSS tip template-specific? (Again, I wouldn't think it matters since we're just moving page elements around, but better to clarify than bang my head against the wall.)

[Brian and Chrystal]

Great tip. Now I'd just love to know how to put an ad either above or below the banner (above the content). I'm looking forward to seeing more CSS tips.

[David G. Molyneaux]

Ditto to Brian and Chrystal. I'd like to know how place an ad above or below the banner. I figured out to do it IN the banner, but i'd rather be above it.