aligning site title and description with header widget

  • Resolved syzygist

    (@syzygist)


    10 years ago

    Hi Tom,

    I’m trying to put a logo to the left of my site title and description. I was able to do this either by adding an image tag to a text widget in the header widget, then left-aligning the header widget, as I have it currently, or by putting the image in the logo field and using css from another support thread to left-align it.

    However, in both cases, there is a larger gap between the site title/description and the image than I would like. The text appears to be center-aligning in the remaining horizontal space, whereas I would like it to center across the full width of the header without regard for the presence of the logo (which I can resize if there is overlap). Is this possible?

    It would also be nice if I could nudge the logo upwards just a smidge (so it aligned to tagline baseline instead of site title text-top, as it appears to be).

    Here’s my site: https://wp-tutor.me

    CSS is in Simple Custom CSS plugin. I have some stuff in there for unremembered purposes, but I tried to note out anything that seemed related and might be interfering.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author Tom

    (@edge22)

    Hi there,

    Give this CSS a try (instead of left floating your header widget).

    .header-widget,
.site-branding {
      display: inline-block;
      float: none;
}

    That should make it so both of them center. Then you can use a little negative margin on the .header-widget class to move it up.

    Hope this helps ??

    Thread Starter syzygist

    (@syzygist)

    Thanks for that. They are now centering as a unit, but they still seem farther from the left side than from the right. That may be an optical illusion related to the design of the logo, but I’d still like to move the whole block further to the left.

    Also, they are vertically aligning as a unit, so changing the top margin on the widget does not move the logo relative to the site title, which is what I was after. Is that possible with this css?

    Theme Author Tom

    (@edge22)

    Replace the above with this to align them vertically:

    .header-widget,
.site-branding {
      display: inline-block;
      float: none;
      vertical-align: middle;
}

    To move it to the left, you could use this CSS:

    .header-widget {
      margin-left: -50px;
}
    Thread Starter syzygist

    (@syzygist)

    Yes! That is what I was looking for. MANY thanks. I was beginning to think I was going to have to turn it all into a header image to get the effect I wanted, but I didn’t see how that could be responsive. I really appreciate your time.

    Theme Author Tom

    (@edge22)

    Awesome ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘aligning site title and description with header widget’ is closed to new replies.