changing position of logo on header

• 

  firecharity911 · Member · Aug 29, 2016 at 4:45 pm

  • Copy link
  • Add topic to favorites

  I would like to change my home page to have my logo added to the right and left of my site title and tag line. Right now the only place I can put it is directly above it in the center. I have the pique theme.

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

• 

  thesacredpath · Member · Aug 29, 2016 at 8:43 pm

  • Copy link

  Hi, this is sort of a complex thing to do, and things start to really fall apart below a window/screen width of 800px, so I’ve limited this change to screens/windows 800px and wider. I’ve also had to include a couple of other Media Queries to deal with some alignment issues.

  Add the following at the very bottom of your custom CSS and then make sure and view thing in a tablet and phone to make sure nothing has gone awry. In my testing, it all seems good, but different devices, and different browsers render things differently so there is always the chance of some hiccups.

  @media screen and (min-width: 800px) {
  .site-branding::before {
      content: url("https://firecharity911.files.wordpress.com/2016/06/picture2-e1471460512565.png?w=150");
      float: left;
      left: 30px;
      position: relative;
      top: 100px;
  }
  .site-branding .site-logo {
      display: none;
  }
  .site-branding::after {
      content: url("https://firecharity911.files.wordpress.com/2016/06/picture2-e1471460512565.png?w=150");
      float: right;
      position: relative;
      right: 30px;
      top: -70px;
  }
  .site-branding, #masthead {
      margin-left: auto;
      margin-right: auto;
      max-width: 1400px;
  }
  .site-title, .site-description {
      margin-left: 180px !important;
      margin-right: 180px !important;
  }
  }
  @media screen and (max-width: 1218px) {
  	.site-branding::after {
  		top: -95px
  	}
  }
  @media screen and (max-width: 888px) {
  	.site-branding:after {
  		top: -125px
  	}
  }

• 

  thesacredpath · Member · Aug 29, 2016 at 8:44 pm

  • Copy link

  I should mention that below 800px in width, the logo returns to a single centered above the title.

• 

  firecharity911 · Member · Aug 30, 2016 at 1:51 pm

  • Copy link

  It worked great , thanks

• 

  firecharity911 · Member · Aug 30, 2016 at 7:16 pm

  • Copy link

  The code made my home page header look great, it looks good on other devices as well. but, when I chose a menu item and open that page the header that opens up with it is jumbled is there a fix for that as well.

• 

  thesacredpath · Member · Aug 31, 2016 at 5:05 am

  • Copy link

  Ah, that’s interesting. We can easily fix that though. In the 800px media query, find this rule
  .site-branding, #masthead
  and add this to it.
  width: 100%;

• 

  firecharity911 · Member · Aug 31, 2016 at 1:16 pm

  • Copy link

  works great thank you

• 

  thesacredpath · Member · Aug 31, 2016 at 7:18 pm

  • Copy link

  Hooray and you are welcome!