How to modify header width, and tag font sizes Sight Theme

• 

  aymagrup · Member · Mar 7, 2014 at 3:59 pm

  • Copy link
  • Add topic to favorites

  I have just updated my blog to use the Sight theme, and a custom designed header. The only two things things that I find bothersome visually is that the header width and the font size for the tags when you open a post.

  First how do I widen the header with from the default 580 pixels, to match the post body width?

  And second, how do I reduce the size of the tags, only at the tops of the page when you open a post?

  Thanks!

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

• 

  thesacredpath · Member · Mar 7, 2014 at 10:04 pm

  • Copy link

  This would be the quick way to widen the header image, but as you will see the quality of the image goes down.

  .site-header hgroup {
      background-size: contain;
      min-height: 220px;
  }

  The other way would be to create a new header image that is 200px tall by 640px wide (the width of the image in the post slider) and then upload it to the media library, get the URL of that image and put it into the background declaration below where it says, URL_OF_IMAGE between the quote marks.

  .site-header hgroup {
      background: url("URL_OF_IMAGE") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  }

  To reduce the tag font size on the single post pages, add the following and adjust the size as desired.

  .entry-categories {
      font-size: 1.8rem;
  }

• 

  kmcorrigan99 · Member · Mar 8, 2014 at 4:35 am

  • Copy link

  Can someone please help me decrease the size of our header in Mystique? We would like it to be at least half the size it currently is. Blog is http://www.crossfitsweatmountain.com.
  Thank you!

• 

  aymagrup · Member · Mar 8, 2014 at 11:05 pm

  • Copy link

  Thanks richard. One more question. For a cleaner look, instead of the primary horizontal strip style menu, I prefer to use the secondary menu in the upper right area next to my header. Is there a css code to make that one the primary? The reason i ask is because on computers and tablets, this works fine, but on a phone, the banner gets compressed so the secondary menu disappears. The screen defaults to the primary menu, which does not exist on my site so users can’t navigate from their phones!

• 

  aymagrup · Member · Mar 8, 2014 at 11:18 pm

  • Copy link

  km corrigan99. I did a little research of my own and found on my site that you can adjust the size of your header by inputing and modifying the following code:

  .site-header hgroup {
  background-size: contain;
  min-height: 220px;
  width:100%;
  }

  The width can be entered as a percentage of the screen width or exact pixel width (for example width: 680px). Give it a try and see if it works.

• 

  designsimply · Member · Mar 13, 2014 at 11:41 pm

  • Copy link

  There are probably multiple numbers of ways to go about trying to update the header layout in the Sight theme. Let’s just say I think it’s quite “finicky” :) and that can make it a little painful to work with.

  That said, here’s a solution for small screen sizes that might work for you. What it does is turn the secondary menu back on for small screen sizes and then it sitcks it just to the right of the header image using 80% as the guide. It also removes the min-height value for the “hgroup” element because otherwise the spacing explodes, and it adds a little extra space above the header image so the menu doesn’t look too skewampus at very small screen widths.

  @media only screen and (max-width: 680px) {
  	.secondary-navigation {
  		display: block;
  		position: absolute;
  		top: 0;
  		left: 80%;
  	}
  	.site-header hgroup {
  		margin-top: 2.5em;
  		min-height: inherit;
  	}
  }