Narrowing overall site width of Twenty Fourteen Theme

• 

  chinahandsmag · Member · Dec 4, 2015 at 8:29 pm

  • Copy link
  • Add topic to favorites

  I’m using the twenty fourteen theme and would like to adjust the width of the site to make it more narrow. However, when I do this, the navbar (upon scrolling, jumps to a odd width that flows off of the screen. How do I fix this?

  This is the CSS code I have in:

  @media screen and (min-width: 1008px) {
  #page{
  	width: 80%;
  }

  (When at top of the screen– looks fine, width is adjusted properly)
  http://tinypic.com/view.php?pic=30u6clu&s=9#.VmH2bvmrSM8

  (Once you scroll past the nav bar, which now sticks to the top, the width is off)
  http://tinypic.com/view.php?pic=5k59q1&s=9#.VmH2oPmrSM8

  I’ve also tried adding something like this, which then makes the nav-bar size appropriate after scrolling to where it starts sticking to the top, but 80% of normal width before scrolling down to that point.

  .header-main {
  	width: 80%
  }

  Suggestions?

• 

  thesacredpath · Member · Dec 7, 2015 at 6:37 am

  • Copy link

  Hi there, I see two sites associated with your WordPress.com account and the first returns a 404 not found and the other site is using Edin but has no content. Can we have a link to the site you are talking about please?

• 

  chinahandsmag · Member · Dec 8, 2015 at 7:25 pm

  • Copy link

  it is currently at chinahandsmagazine.org

• 

  thesacredpath · Member · Dec 9, 2015 at 7:00 pm

  • Copy link

  Thanks much for the link. You are on the right track with what you have. The width of the overall container is set as a max-width, and I would suggest a px value for that instead of a percentage as a percentage results in things going awry. I would also suggest a max-width that is narrower than the min-width set in the media query – again to keep things from going awry. Give this a try and see what you think. Add it below your other custom CSS.

  @media screen and (min-width: 1080px) {
  	#page {
  		max-width: 1000px;
  	}
  }