up vote 5 down vote favorite

The logo below the top bar on several sites is no longer vertically centered within the header bar.

Affected sites:

  • Webmasters (I'm a moderator there and it has been bugging me for a month or so)

  • Mathematica appears to have the same issue, but it doesn't look quite as bad there. The header block extends further down compared to the shaded background region. This causes the logo to be off-center vertically, although not quite pushed against the bottom like on webmasters.

  • User Experience -same problem also occurs there:

  • Web Applications:

Changing the top position of the logo, e.g. from -11px to -19px for Webmasters in the CSS appears to be a quick fix for the issue:

#hlogo {
    ...
    top: -19px;
}

After changing:

share|improve this question
  • Actually I think the problem is the blue background. The logo is vertically centered in the header, but the background does not have the full height. – Floern Jan 9 at 11:02
  • The blue bar was taller at one point, however I like the shorter bar. I was thinking that change was intentional, but the logo didn't get placed properly. – Stephen Ostermiller Jan 9 at 11:04
  • Most likely result of the new top bar, which is higher than the previous, hence it "pushed" everything down a bit. – Shadow Wizard Jan 9 at 11:36
  • Now I found another SE site with the same problem. – Stephen Ostermiller Jan 9 at 14:29
  • This likely affects many sites with custom design, SE developers couldn't possibly test and change the design on all of them when applying the new top bar, so they need to do that one by one now. – Shadow Wizard Jan 9 at 14:30
  • I just went through all the SE sites that have a custom logo. Most of the sites do not have this problem, but I found four that do. Of them webmasters is the worst because the logo is touching the border. – Stephen Ostermiller Jan 9 at 14:36
  • Cheers, thanks for the hard work! :) – Shadow Wizard Jan 9 at 14:48
up vote 1 down vote accepted

I believe this is fixed in the standard theme because of its use of flex classes. In any case, the logos do appear to be vertically centered in the header on sites with responsive design. (You'll need to enroll in the beta to see the change at the moment.)

Hat tip to [checks notes] you! Thanks for the report.

share|improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .