Penscratch theme: moving header above menu

• 

  boyandspoon · Member · Apr 2, 2015 at 11:46 am

  • Copy link
  • Add topic to favorites

  Hi there

  I’ve seen there are a couple of threads about this already but was hoping for some help specific to my blog as I am a bit scared of stuffing things up. I’m using Penscratch and would like to move the header image above the menu (to where the site title and logo are currently situated). The reason for this is that the logo comes up too small, otherwise I’d just upload my header image as a logo.

  Is this possible to do without messing up the theme’s responsiveness on tablets and phones?

  Alternatively, is it possible to increase the logo size so I can keep everything where it is? that way I wouldn’t be messing with the responsiveness but my header would be more visible.

  Many thanks in advance

  boyandspoon

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

• 

  thesacredpath · Member · Apr 2, 2015 at 10:04 pm

  • Copy link

  @boyandspoon, yes, it is possible, but it does require a number of media queries to adjust spacing at various points so that the image doesn’t end up with a bunch of whitespace below it on smaller screens/windows.

  .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;
  	}
  }

  You may want to redo your header image and center the text as it becomes very obvious it is off center at narrower window/screen sizes.

• 

  boyandspoon · Member · Apr 3, 2015 at 6:02 am

  • Copy link

  thank you so much thesacredpath – will give this a try!

• 

  boyandspoon · Member · Apr 3, 2015 at 6:05 am

  • Copy link

  also, do you know if it is possible to change the fonts in my post titles? I would like to use the same font as my header image (which is a custom font – not available in the customiser) in all my post titles and widget titles.

  can this be done through coding or is there a way to save each post title as a JPEG and upload it as an image at the start of each post??

  many thanks again…

• 

  thesacredpath · Member · Apr 3, 2015 at 7:44 pm

  • Copy link

  Fonts for web use are an interesting problem. When a browser loads a website, it first looks to the website files to see if a certain font is declared there, if it is not, then it looks to the visitor’s computer OS and if it isn’t in either of those two places, then it substitutes its built-in serif or sans-serif font.

  The font you are using in your header is not something installed on all computer systems, so if you were to specify that font, only those visitors that had installed that font on their system would see it. Everyone else would get a substitution.

  Trying to use an image for each post would require each post to have a unique CSS rule, and if you have lots of posts, then your CSS file starts to get huge and it would take longer and longer to load, so I would suggest against that.

  If you are talking about putting the image in the post content at the top, that would put the title image below the date and such, but yes, this could be done. We could then use CSS to hide the normal text based title leaving it still available for the search engines. The issue with this is though, you would have to link the image to the final post title URL so that people could click on it to get to the post since the linked text-based title would not be there. This would be the CSS to hide the post titles.

  .post .entry-title {
      display: none;
  }