Customising header height in penscratch theme

• 

  plcmatthews · Member · Jul 22, 2015 at 1:06 pm

  • Copy link
  • Add topic to favorites

  Hi there,

  I have wordpress premium and am just trying to adjust the custom header height on my blog… it is too wide for my liking.

  I would also like the logo image to be a bit smaller and perhaps higher up on the page.

  What code do I need to put into CSS and how will it save the changes?

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

• 

  darrellschulte · Member · Jul 25, 2015 at 5:43 am

  • Copy link

  Hi plcmatthews,

  You can add Custom CSS to your site using the CSS Editor in the Appearance → Customize → CSS panel in your Dashboard.

  You are not using a tagline with your site, but that area for the tagline still takes up space. This removes tagline area from view and also removes about 30 pixels from the top and bottom padding of the page.

  h1.site-title {
      display: none;
  }
  
  .site {
      padding: 24px 108px;
  }

  The CSS above can be copied and pasted into the CSS panel and then Saved. That’s all there is to it.

• 

  plcmatthews · Member · Jul 25, 2015 at 9:18 am

  • Copy link

  thanks so much that helped! how can i now (what code do i put into CSS) to reduce the header image height? the pictures i have (randomising customer headers) – are all too wide… id like the images to be reduced in height and not width?

  thanks again

• 

  darrellschulte · Member · Jul 25, 2015 at 2:51 pm

  • Copy link

  The size of the header image is generated by the theme. When you adjust the height with CSS, the image display will seem squished or look fuzzy. You can see what I mean by testing it with this:

  img.custom-header {
      height: 300px;
  }

• 

  plcmatthews · Member · Jul 25, 2015 at 5:13 pm

  • Copy link

  awesome thank you so much! i see what you mean and i managed to adjust the width too so it doesn’t become blurry or stretched!!

  Thank you – one last thing now – sorry!

  is there a way i can enter a code in CSS to place the header above the menu bar? it would be great if could have the header below the logo and the menu bar (with home about etc.) underneath the header?

  Thanks as always for the help!

• 

  darrellschulte · Member · Jul 25, 2015 at 5:45 pm

  • Copy link

  Check out this thread: https://en.forums.wordpress.com/topic/penscratch-theme-moving-header-above-menu?replies=5

  I’m away from my computer, so I can’t test it but I have faith that it will work.

• 

  darrellschulte · Member · Jul 25, 2015 at 8:18 pm

  • Copy link

  It was close. Here’s an option that has the order of: header image, logo, menu.

  h1.site-title {
      display: none;
  }
  
  img.site-logo.attachment-penscratch-site-logo {
      margin-top: 120px;
  }
  
  .site {
      position: relative;
      margin-top: 0;
      padding-top: 200px;
  
  }
  
  .custom-header {
      position: absolute;
      top: 0;
  }
  
  @media screen and (max-width: 768px) {
      .site {
          padding-top: 160px;
      }
  }
  
  @media screen and (max-width: 600px) {
      .site {
          padding-top: 130px;
      }
  }
  
  @media screen and (max-width: 480px) {
      .site {
          padding-top: 100px;
      }
  }
  
  @media screen and (max-width: 380px) {
      .site {
          padding-top: 80px;
      }
  }

• 

  plcmatthews · Member · Jul 26, 2015 at 9:40 am

  • Copy link

  Thank you! Tried it… But last chance to have logo, image then menu?