Adjust header image and nav bar menu to the center of individual post page

• 

  jameswelbes · Member · Sep 2, 2015 at 11:02 pm

  • Copy link

  Hey Sacred,

  I think this is what she’s going for.

  https://drive.google.com/open?id=0B7wsbMlxgK8neFY5VVo4NUNuZDg

  Jen is this correct?

• 

  thesacredpath · Member · Sep 3, 2015 at 12:37 am

  • Copy link

  Ah, full width of the browser window. @jenmackintosh, give this a try. Put it at the very end of your custom CSS.

  .single #header .container {
      width: 100%;
  }
  .single #header .container #header-image {
      background-position: center 50%;
      background-size: cover;
      width: 100%;
  }

• 

  jameswelbes · Member · Sep 3, 2015 at 1:24 am

  • Copy link

  Sacred,

  For me, that worked as far as the image goes but the nav bar on top is no longer centered.

  I’m not able to put all the code at the bottom of the CSS file, since I don’t own the site I’m just plugging things into Chrome’s Inspect Element so maybe that’s why.

  Is the navbar centered for you?

• 

  jameswelbes · Member · Sep 3, 2015 at 1:29 am

  • Copy link

  adding:

  #masthead {
  margin-left: 10%;
  }

  centered the navbar for me

• 

  jenmackintosh · Member · Sep 3, 2015 at 2:01 am

  • Copy link

  That’s it!!!! Perfect!!! Exactly what I wanted! THANK YOU BOTH!

  Could I ask two more favors?

  I like the full stretched header banner – could you give me the css to stretch the header the full width of the browser window on the home page, too?

  And…on the right sidebar, the social connect buttons are tiny, justified left, and gray. Is it possible to center them, make them bigger, and make them this color hex #007ea1?

  Thanks so much for everything!

• 

  jameswelbes · Member · Sep 3, 2015 at 2:22 am

  • Copy link

  For the social widgets:

  .widget-area .widgets ul {
  margin: 0;
  text-align: center;
  padding: 0;
  }

  .widget-area .widgets ul li a {
  color: #007ea1;
  font-size: 30px;
  }

• 

  jenmackintosh · Member · Sep 3, 2015 at 2:28 am

  • Copy link

  Thank you, James! Worked perfectly!

• 

  jameswelbes · Member · Sep 3, 2015 at 2:30 am

  • Copy link

  for the home page header image, I’m going to guess and say do the same thing but replace “.single” with “.home”

  .home #header .container {
  width: 100%;
  }
  .home #header .container #header-image {
  background-position: center 50%;
  background-size: cover;
  width: 100%;
  }

  lemme know if that works or not

• 

  jenmackintosh · Member · Sep 3, 2015 at 2:39 am

  • Copy link

  That did it, James! Thanks so much for hanging in there with me! I’m really glad you did!

  That’s all I need! :)

• 

  jameswelbes · Member · Sep 3, 2015 at 2:40 am

  • Copy link

  Awesome! Glad to hear it =]

  Don’t forget to mark this thread as “Resolved” and of course feel free to start another thread if you have any more questions.