How to deal with the WordPress administration toolbar with CSS

When a user is logged in to WordPress, the administration toolbar will appear above the site content. When the user logs out, the admin bar will disappear.

In the HTML markup the admin bar is placed just below the main content of the site page, like this:

<body>
    <div id="page" class="site"></div>
    <div id="wpadminbar"></div>
</body>

The #wpadminbar CSS styling basically contains:

#wpadminbar {
	line-height: 32px;
	height: 32px;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	min-width: 600px;
	z-index: 99999;
}

@media screen and (max-width:782px) {
	html #wpadminbar { height: 46px; min-width: 240px; }
}
@media screen and (max-width:600px) {
	#wpadminbar { position: absolute; }
}

This means all we have to do to accommodate for the #wpadminbar is to push down the #page (that is pushing down the main content) like so:

#page {
    position: fixed;
    top: 32px;
    z-index: 99990;
    width: 100%;
}

@media screen and (max-width:782px) {
    html #page { top: 46px; }
}

Leave a ReplyCancel Reply