Is there a ready-made fix to make the admin bar not obscure content?

Upon closer inspection, I found out that WordPress already does try to move everything that would be obscured further down. The problem is elements that have been positioned using position: fixed or position: absolute.

What I ended up doing is adding separate CSS rules for those that apply only when the admin-bar class is set on the body (which WordPress does automatically when the bar is visible.) like e.g. so:

/* Normal mode */
ul.sidemenu { top: 4px; left: 4px; ..... etc. etc.}
ul.langmenu  { top: 4px; right: 4px; .... etc. etc. }

/* Move elements 28px down when the admin bar is visible */
body.admin-bar ul.sidemenu  { top: 32px}
body.admin-bar ul.langmenu  { top: 32px}

Leave a Comment