Remove tiny space between header and navigation in Thesis

So it took me probably 3 whole weeks to figure this puppy out.

No one on the forums at DIY got it, and I saw a ton of people asking how to do it.

So here is how to remove that tiny space between the header and the nav if the nav is below the header.

Go to your custom .css under appearance > Thesis custom styling, and add the following code:

.custom #header { padding-bottom: 0px; }

You can also remove padding all around the header top and bottom by just making all the padding 0 like this:

.custom #header { padding: 0px; }

Let me know if you have questions!

Posted on October 9th, 2009 by Rachael Butts in WordPress Designer

About Rachael Butts

Rachael Butts is the CEO and lead designer for Rachaelbutts.com Rachael has been designing for WordPress since 2005, and has a passion for keeping up with the latest business practices in WordPress design and development. She thoroughly enjoy sales and marketing , client management, and making website creation fun for her clients.

Connect with Us

20 Responses

Roman Zak
05/14/2010 02:20:43

ahh!! you saved my nerves! bless you!

Rachael Butts
05/14/2010 10:51:41

Awesome Roman! Glad it worked for you.

Malita
06/6/2010 23:10:59

So in thesis open hook this is what I put in my header section –

white space is still there what did i do wrong?

Malita
06/6/2010 23:12:24

Sorry left a comment with my code but the coding didn’t show up – take two..

img style=”display:block;”img src=”http://rosedalerambler.com/wp-content/uploads/2010/06/header.png” width=”990″ height=”200″

Rachael Butts
06/8/2010 12:51:01

Hi Malita-
I went to your site…looks like you got it….Looks good!

Your code looked fine, but it looks like you are not using Thesis, so Open Hook would not apply here .

I have worked with that theme though, good job!

Ziddy Thesis
07/14/2010 12:17:03

It’s easier to add this line to custom CSS
.custom #header { padding-bottom: 0; }

Rachael Butts
07/15/2010 19:47:49

Yep! you are correct, this was an old post for newbies who were uncomfortable accessing the custom file editor.

karla
08/31/2010 10:09:43

thank you so much for posting your fix!!! i spent 3 hours looking for the answer to this!!! you rock!!!

Rachael Butts
09/3/2010 15:04:52

Thanks Karla!

Belinda Wasser
09/7/2010 10:13:38

Hi Rachel!

What about the line between the header and content box (my nav will be in the header). Is there a way to make it a different color?

Thanks!

Rachael Butts
09/8/2010 15:17:45

Hi Belinda!
Can you send me a link?
Thanks!

Neal | Sax Station
04/24/2011 21:37:14

Thank you very much Rachael!!! Had been trying to figure that out will little luck for a while. Actually ended up using the CSS line that Ziddy suggested in the comments on this post.

Rachael Butts
04/27/2011 00:09:34

Awesome! I would do that too. This is more of newb post and kinda old :p
Glad you got it!

Karla
05/12/2011 17:09:09

Do you have a secret on how to remove extra space AFTER the nav? Please see website. I want to remove about 10 pixels from underneath the nav. Although maybe it’s padding around my image?

Karla
05/13/2011 09:02:31

Hi Rachael! After I posted I found the answer and thought I’d share it with you and your readers:
To remove space before a content box:
.custom #content_box {position: relative; top: -18px;}

: ) karla

Rachael Butts
05/17/2011 22:55:52

Glad you got it Karla! Way to go!

Wesley
05/26/2011 14:39:55

I’m lost – This seems like what I want to do – I want to remove the line below the header and above the nav bar.

Where would I put your code? I don’t understand your notes. I
tried this
.custom #header { padding-bottom: 0; }
but did not help

Running thesis 1.8

thanks,

Juliette
05/30/2011 05:54:03

The images on your post are not displaying correctly, so we can’t see the code you propose.
Mind having a look?
Thanks!

Rachael Butts
06/27/2011 01:44:54

Hi Wesley!

You would need to add a px after the 0
so it would be
.custom #header { padding-bottom: 0px; }

Rachael Butts
06/27/2011 01:50:01

Hi Juliette!

I have actually updated the post. I no longer use Open hook, so you would add the new code in the post to your Thesis custom styling folder.

Matt
04/23/2012 16:39:26

Hi Rachael,

Thanks heaps for this post. I’ve added custom css to hide titles on pages, however there is still whitespace where the title would show… have you any ideas on how this can be fixed?

Rachael Butts
05/9/2012 10:30:11

Hi Matt!

Can you send a link to your site?

Thanks!
Rachael

Roman Zak
05/14/2010 02:20:43

ahh!! you saved my nerves! bless you!
Rachael Butts
05/14/2010 10:51:41

Awesome Roman! Glad it worked for you.
Malita
06/6/2010 23:10:59

So in thesis open hook this is what I put in my header section –

white space is still there what did i do wrong?
Malita
06/6/2010 23:12:24

Sorry left a comment with my code but the coding didn’t show up – take two..

img style=”display:block;”img src=”http://rosedalerambler.com/wp-content/uploads/2010/06/header.png” width=”990″ height=”200″
Rachael Butts
06/8/2010 12:51:01

Hi Malita-
I went to your site…looks like you got it….Looks good!

Your code looked fine, but it looks like you are not using Thesis, so Open Hook would not apply here .

I have worked with that theme though, good job!
Ziddy Thesis
07/14/2010 12:17:03

It’s easier to add this line to custom CSS
.custom #header { padding-bottom: 0; }
Rachael Butts
07/15/2010 19:47:49

Yep! you are correct, this was an old post for newbies who were uncomfortable accessing the custom file editor.
karla
08/31/2010 10:09:43

thank you so much for posting your fix!!! i spent 3 hours looking for the answer to this!!! you rock!!!
Rachael Butts
09/3/2010 15:04:52

Thanks Karla!
Belinda Wasser
09/7/2010 10:13:38

Hi Rachel!

What about the line between the header and content box (my nav will be in the header). Is there a way to make it a different color?

Thanks!
Rachael Butts
09/8/2010 15:17:45

Hi Belinda!
Can you send me a link?
Thanks!
Neal | Sax Station
04/24/2011 21:37:14

Thank you very much Rachael!!! Had been trying to figure that out will little luck for a while. Actually ended up using the CSS line that Ziddy suggested in the comments on this post.
Rachael Butts
04/27/2011 00:09:34

Awesome! I would do that too. This is more of newb post and kinda old :p
Glad you got it!
Karla
05/12/2011 17:09:09

Do you have a secret on how to remove extra space AFTER the nav? Please see website. I want to remove about 10 pixels from underneath the nav. Although maybe it’s padding around my image?
Karla
05/13/2011 09:02:31

Hi Rachael! After I posted I found the answer and thought I’d share it with you and your readers:
To remove space before a content box:
.custom #content_box {position: relative; top: -18px;}

: ) karla
Rachael Butts
05/17/2011 22:55:52

Glad you got it Karla! Way to go!
Wesley
05/26/2011 14:39:55

I’m lost – This seems like what I want to do – I want to remove the line below the header and above the nav bar.

Where would I put your code? I don’t understand your notes. I
tried this
.custom #header { padding-bottom: 0; }
but did not help

Running thesis 1.8

thanks,
Juliette
05/30/2011 05:54:03

The images on your post are not displaying correctly, so we can’t see the code you propose.
Mind having a look?
Thanks!
Rachael Butts
06/27/2011 01:44:54

Hi Wesley!

You would need to add a px after the 0
so it would be
.custom #header { padding-bottom: 0px; }
Rachael Butts
06/27/2011 01:50:01

Hi Juliette!

I have actually updated the post. I no longer use Open hook, so you would add the new code in the post to your Thesis custom styling folder.
Matt
04/23/2012 16:39:26

Hi Rachael,

Thanks heaps for this post. I’ve added custom css to hide titles on pages, however there is still whitespace where the title would show… have you any ideas on how this can be fixed?
Rachael Butts
05/9/2012 10:30:11

Hi Matt!

Can you send a link to your site?

Thanks!
Rachael

Wedesign + developWordPress websites