Backend Designer. Logo overlays Admin Bar Navigation


May be I oversee something, I am playing around with customiing admin part.
I have put the project logo, but it is displayed over the navigation and looks awful.

Do I do something wrong or it just works like this that I must fit the logo into that tiny space before the navigation?


The wp admin bar is only 32px high by default, so setting a height not greater than 32px in the field next to the logo will make it fit without overshooting

If you already did that and it’s still being shown too big, my first thought would be that you’re using an svg which has a fixed width and height set inside the svg itself. I’ve tried with a PNG and with an SVG that just has a viewbox set, no height or width, and it worked.
If that is the case, you can upload your svg here → SVGOMG - SVGO's Missing GUI and select to replace width and height with viewbox attributes.

If that’s not it, feel free to upload the logo so we can try it out :slight_smile:

Hey @avarezhnikova :slight_smile: You can follow @manc’s answer.

Additionally, this makes me think if a max-height static value would make sense here. What do you guys think? Or would this limit you in some cases? (Maybe for creating overlaps or something)

Personally, I think a static max-height would make sense. I just don’t think the admin bar should be messed around with too much but maybe that’s just me. Alternatively maybe have an editable css field that’s enqueued on the backend with a few hints for wp selectors to target, so people can go bonkers and even change the height of the admin bar or whatever.

1 Like