How to align your custom header with your navbar

Post image for How to align your custom header with your navbar

by bledsoe on January 21, 2010

If you use the Thesis theme for your WordPress blog, you might have created your own custom header image for your site (kind of like mine, above).  If so, you may have noticed that your header image doesn't seem to align correctly with your navbar.  To get your header image and your navbar aligned, you'll need to add a few lines of code to your Thesis custom.css file.  It's a simple fix, and here's how you do it.

Click on the Thesis Custom Styling option under the Appearance menu in your dashboard sidebar.  This allows you to make changes to your Thesis custom.css file.  At the bottom of this file, insert the following lines of code.

/* The following lines control the alignment of your header image with your navbar. As long as these are all set to zero, your header image will be aligned with your navbar on the right and left, with no whitespace between the header image and the navbar.
*/
.custom #header {
padding-bottom: 0;
padding-top: 0;
padding-left: 0;
border-bottom: 0;
}

Save your changes, reload your blog page, and your header image and navbar will be aligned.

Previous post:

Next post: