Spacing above header

• 

  suegentdesign · Member · Jan 22, 2015 at 4:05 pm

  • Copy link
  • Add topic to favorites

  I’ve used Penscratch theme. It wouldn’t allow me to have my logo as big as I wanted to so I’ve used the logo in the header instead. Someone kindly helped me with the spacing by suggesting this:

  .main-navigation {
  padding-top:0;
  margin-top:0;
  }

  .custom-header {
  padding-bottom:30px;
  }

  …which worked really well except I’ve decided to make the logo smaller. Now it looks as if there’s too much space above and below the menu again. I also wondered how easy it would be to add a thin rule below the header, like the ones used in the sidebar?

  Can anyone help with this? Many thanks.

  Cheers
  Sue

  The blog I need help with is: (visible only to logged in users)

• 

  staff-happychia · Staff · Jan 23, 2015 at 7:48 am

  • Copy link

  Could you confirm if the current logo is the smaller version you are talking about?

  Could you remove this style:

  .custom-header {
  padding-bottom:30px;
  }

  and add

  .site-content .widget-area {
  	padding-top: 20px;
  }
  
  .content-area {
  	padding-top: 20px;
  	border-top: 2px solid gray;
  }

  and let me know what you think :-)

• 

  suegentdesign · Member · Jan 23, 2015 at 8:06 am

  • Copy link

  That’s brilliant! Thanks so much.

  I’ve tweaked it slightly ( and yes, that is the current logo) so it now has this (below). The only other issue is whether I can get a little more space between the logo (header) and the rule? And a little less space between the top of the logo and the navigation menu AND between the top of the navigation menu and the top of page – any suggestions gratefully received!

  .main-navigation {
  border-top: 0 solid #eee;
  }

  .site-header {
  border-bottom: 0 solid #eee;
  }

  .main-navigation {
  padding-top: 0;
  margin-top: 0;
  }

  .site-content .widget-area {
  padding-top: 50px;
  }

  .content-area {
  padding-top: 50px;
  border-top: 1px solid #eee;
  }

• 

  staff-happychia · Staff · Jan 23, 2015 at 8:59 am

  • Copy link

  a little less space between the top of the logo and the navigation menu

  and

  a little more space between the logo (header) and the rule?

  .custom-header {
  padding-top: 20px;
  padding-bottom: 20px;
  }

  between the top of the navigation menu and the top of page

  .site-header {
  margin-top: 27px;
  }

  :-)

• 

  suegentdesign · Member · Jan 23, 2015 at 9:17 am

  • Copy link

  Thanks again, very kind! This has increased the space between the bottom of the header and the rule which is great. But the other code would actually increase the gap above and below the navigation menu, not decrease it.

  But looking at what’s already in the CSS I don’t know if it’s possible? Padding top is set to zero so I guess maybe it can’t be any less?!

  Here’s all I have again (updated), just in case you can spot something:

  .main-navigation {
  border-top: 0 solid #eee;
  }

  .site-header {
  border-bottom: 0 solid #eee;
  }

  .main-navigation {
  padding-top: 0;
  margin-top: 0;
  }

  .site-content .widget-area {
  padding-top: 50px;
  }

  .content-area {
  padding-top: 50px;
  border-top: 1px solid #eee;
  }
  .custom-header {
  padding-top: 0px;
  padding-bottom: 20px;
  }

• 

  staff-happychia · Staff · Jan 23, 2015 at 9:35 am

  • Copy link

  My bad! I overlooked the “less” part :-(
  “…a little less space between the top of the logo and the navigation menu…”

  Anyway, you set the top padding of the header to 0px which is good.

  Luckily the navigation menu has a bottom padding of 24px and bottom margin of 27px. So we can use the following rule to reduce them:

  .site-header{
  padding-bottom: 24px;
  margin-bottom: 27px;
  }

• 

  suegentdesign · Member · Jan 23, 2015 at 9:43 am

  • Copy link

  Sorry, this doesn’t seem to do anything. I was just adding it to the bottom. Am I doing something wrong?

  Thanks for your time.

• 

  staff-happychia · Staff · Jan 23, 2015 at 9:48 am

  • Copy link

  I can’t see the latest style I provided in your custom CSS. Have you added it? You should not only add but to lower the current values of 24px and 27px.

  Pasting here again for you with lowered values:

  .site-header{
  padding-bottom: 12px;
  margin-bottom: 14px;
  }

• 

  suegentdesign · Member · Jan 23, 2015 at 9:52 am

  • Copy link

  Sorry – maybe I did it wrong. This is PERFECT.

  Huge thank you!

• 

  staff-happychia · Staff · Jan 23, 2015 at 9:55 am

  • Copy link

  No problem. Glad to be of help. :-)

  Happy blogging.