Move logo and tagline – Affinity theme

• 

  charlottemorin · Member · May 24, 2019 at 9:00 am

  • Copy link
  • Add topic to favorites

  Hi!
  I need some help on Affinity theme.
  I would like to move logo and tagline (description) to the left of site title (Ton album arc-en-ciel).
  Is it possible to do it with CSS?
  Thanks!
  C.

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

• 

  raduconstantin1 · Member · May 28, 2019 at 2:30 pm

  • Copy link

  Hey C.,

  I had a close look over the logo and tagline of the Affinity theme and I could see that these two elements are displayed in the middle of the page header. What are you asking is move them to the left side of the site title which is placed at the top left corner. In this case, I’m afraid that you cannot do the change you’re looking for. While I can help you slightly move the logo and tagline, making the change you’re asking would require more than a few lines of code.
  If you want, I can help you with some CSS to move these two to the left side (and stop having them in the middle).

  Regards,
  Radu

• 

  charlottemorin · Member · Jun 3, 2019 at 1:33 pm

  • Copy link

  Hi Radu!
  Ok I understand.
  Is it possible to move them to the left side below the title and also change the size of the text?
  Thanks,
  C.

• 

  charlottemorin · Member · Jun 4, 2019 at 3:00 pm

  • Copy link

  Hi!
  I removed text description but I would like to move the logo. I tried everything: logo, logo-site, site-branding… nothing works.
  Do you have any idea?
  Thanks,
  C.

• 

  raduconstantin1 · Member · Jun 4, 2019 at 3:07 pm

  • Copy link

  Hey C.,

  I can only help you move the logo from the center of the center to the left or to the right (instead of being centered). However, changing its place to a different section, like around the title, won’t be possible only with some CSS. This requires a different structure for the header elements that can be done through some coding.

  Thanks,
  Radu

• 

  charlottemorin · Member · Jun 4, 2019 at 3:10 pm

  • Copy link

  Hi!
  Yes, it’s exactly what I need to do… I just want to move the logo to the left, that’s all.
  Thanks,
  C.

• 

  raduconstantin1 · Member · Jun 5, 2019 at 3:07 pm

  • Copy link

  Hey C.,

  You can try this CSS:
  
.custom-logo {
margin: 0;
}
.site-description-wrapper {
width: 100%;
}

  in order to move the logo to the left side.

  Best,
  Radu

• 

  charlottemorin · Member · Jun 6, 2019 at 8:30 am

  • Copy link

  Hey Radu,
  thanks so much!
  I did this and it works:

  .custom-logo {
  margin: 20px;
  }

  .site-description-wrapper {
  width: 100%;
  top: 140px;
  }

  Is it possible to keep the ratio (logo size changing for each screen size) and be sure the logo appears correctly on every screens?
  Thanks again,
  C.

• 

  raduconstantin1 · Member · Jun 8, 2019 at 10:06 am

  • Copy link

  Hey C.,

  The logo is made to keep its aspect ratio but the “problem” is that a small part of it is not visible due to the margin the you set for the .custom-logo. You can try to use this CSS:
  
.custom-logo {
max-width: 85%;
}

  that should make the logo a decreased size on smaller screens (and have it fully visible).

  Best,
  Radu

• 

  charlottemorin · Member · Jun 11, 2019 at 12:00 pm

  • Copy link

  Hi Radu,
  it’s ok like that.
  Thanks a lot for your help,
  C.