Using Bootstrap & WordPress’ Fixed Position Menus Together

When using Bootstrap’s ‘Topbar’ (or any fixed position element) at the top of the page, you’ll have a problem with it and the WordPress ‘Admin bar’ laying atop each other. Here’s a quick and easy fix… provided you follow the examples from twitter.github.com/bootstrap.

.admin-bar .topbar { margin-top: 28px;}

WordPress attaches the admin-bar class to your body tag when you are logged in and the option is set to show the admin bar. Also useful, the logged-in class which gets attached when you are logged in, no matter your ‘admin bar’ preferences. These helper classes can be useful for any number of reasons, but especially here.

For now, it seems the WordPress Admin bar is 28px high. If this changes, you’ll have to edit your CSS to reflect the change. There are certainly other ways to inject the CSS, but this is likely as lightweight as you can get.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: