Put a logo on the left of the header

  • Hello,

    I want to put the logo (now in the right column) instead of the text in the header.
    How can I manage that ?

    Thanks in advance !

    • This topic was modified 6 years, 9 months ago by afmedia.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Hi there, give this a try and see what you think. To adjust the size of the logo, adjust the line-height in the first CSS rule.

    .site-branding .site-title a {
  color: transparent;
  display: block;
  line-height: 120px;
}
.site-branding {
  background: url('https://loz.gad-zukes.com/wp-content/uploads/2018/05/logo-3-300x212.png') no-repeat scroll left top / contain;
}
#masthead {
  padding-bottom: 0;
}
    Thread Starter afmedia

    (@afmedia)

    Hi, thank you ??
    Is there a way to make it responsive ?

    Thanks

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Oops, sorry, I didn’t notice that. Add the following below what you have, which adjusts the line-height so that gap isn’t there and makes the logo a bit smaller. See what you think.

    @media screen and (max-width: 559px) {
  .site-branding .site-title a {
    line-height: 50px;
  }
}
    Thread Starter afmedia

    (@afmedia)

    Thanks, it works perfectly !

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Yay and you are welcome!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Put a logo on the left of the header’ is closed to new replies.