Back to Blog

Fix WP admin bar overlapping page design

Fix WP admin bar overlapping page design

When you login into your WordPress website, you may find the WordPress admin bar (panel) overlaps your web page. The following css code fixes this simply by moving our initial <div class=”top”> further down the page, to stop this happening.

How can we target the <div class=”top”> only when logged in, well, when logged in, WordPress adds a class to the <body> tag called ‘.customize-support’. So all we need do is add the following css code to move our page content down by 32px when this class is present.

.customize-support .top {top: 32px;}

That’s all folks!

Interested? - If you'd like to have a chat about mobile responsive websites, simply give us a call on 01302 638 638, we'd be glad to help.