logo location in header

• 

  caddietravels · Member · Aug 28, 2016 at 2:05 pm

  • Copy link
  • Add topic to favorites

  Ive had help with this before but It seems to have moved. I like where the header logo is on all the pages but when you go to a blog post the header moves from being centered to up in the top left corner. I’d like it to stay centered like all other pages. This is for the desktop version only.

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

• 

  thesacredpath · Member · Aug 28, 2016 at 7:55 pm

  • Copy link

  Hi there, the Media Query code you have in your custom CSS is specifically targeting static pages. Replace it with this to have it center the logo everywhere.

  @media screen and (min-width: 956px) {
  branding {
      clear: both;
      margin: 40px 2%;
  }
  .wf-active h1.logo {
      font-size: 6.2em;
  }
  h1.logo {
      margin: 0 auto;
      text-align: center;
      width: 90%;
  }
  h2.description {
      text-align: center;
  }
  }

• 

  caddietravels · Member · Aug 28, 2016 at 9:03 pm

  • Copy link

  Could you tell me which of my css to remove? I don’t want to mess it up

• 

  thesacredpath · Member · Aug 28, 2016 at 10:45 pm

  • Copy link

  Replace the existing
  @media screen and (min-width: 956px)
  rule you have in your custom CSS right now.

• 

  caddietravels · Member · Aug 29, 2016 at 3:08 pm

  • Copy link

  I must be doing something wrong cause my logo disappears when I add the new CSS.

• 

  thesacredpath · Member · Aug 29, 2016 at 7:54 pm

  • Copy link

  First off, go to the very bottom of your custom CSS and paste this in below all other CSS.

  @media screen and (min-width: 956px) {
  branding {
      clear: both;
      margin: 40px 2%;
  }
  .wf-active h1.logo {
      font-size: 6.2em;
  }
  h1.logo {
      margin: 0 auto;
      text-align: center;
      width: 90%;
  }
  h2.description {
      text-align: center;
  }
  }

  Save and visit your site and make sure everything is working as you want it. If it is, go back to Customize > CSS and about half way down you will find this

  @media screen and (min-width: 956px) {
  	.page .branding {
  		clear: both;
  		margin: 40px 2%;
  	}
  
  	.wf-active .page h1.logo {
  		font-size: 6.2em;
  	}
  
  	.page h1.logo {
  		margin: 0 auto;
  		text-align: center;
  		width: 90%;
  	}
  
  	.page h2.description {
  		text-align: center;
  	}
  }

  delete that and save again. All I did to that code was to remove the .page CSS classes from the rules in that code so that the code would apply everywhere.

• 

  caddietravels · Member · Aug 29, 2016 at 8:04 pm

  • Copy link

  It works when both CSS are in. When I delete the old CSS, logo disappears. Ill just keep both unless you think it will mess something up. Thank you

• 

  thesacredpath · Member · Aug 30, 2016 at 2:49 am

  • Copy link

  Hmmm, strange. It doesn’t seem to do that for me. Yeah, just keep the old one in then.