[Theme: Frisco for BuddyPress] Make admin bar fully responsive

#wpadminbar {
    min-width: 0;
}

That’s a start. By default, the admin bar is set to 600px min-width, but you can add that CSS above either at the end of the style.css or in a custom.css in the theme folder to override it.

And the left section of the admin bar is pretty useless to most users, so you could just hide that using media queries for mobile devices and the following CSS:

#wpadminbar .quicklinks ul#wp-admin-bar-root-default {
     display: none;
}

I will be putting these types of fixes into the next version of the theme when BuddyPress 1.6 comes out and the new admin bar is used on all installs. The next theme version will be available shortly after BuddyPress 1.6 comes out.

P.S. My response assumes you’re using the new admin bar instead of the BuddyBar. If you’re not sure about this, don’t sweat it because it will be taken care of with the next theme version.

Hi David,

It works well but how do I restrict the custom css to only mobile devices.

Assuming you’re using BP 1.5 with the WordPress admin bar enabled, add something like the following to your custom stylesheet.

@media only screen and (max-width: 767px) {
    .logged-in #wp-admin-bar-root-default,
    .logged-in #wpadminbar #adminbarsearch,
    .logged-in .ab-sub-secondary .ab-sub-wrapper {
		position: absolute !important;
   		top: -9999px !important;
   		left: -9999px !important;
    }
    .logged-in #wpadminbar {
    	min-width: 0;
    }
    .logged-in #wpadminbar .ab-top-secondary .menupop .menupop > .ab-item {
    	background-image: none;
    }
    .logged-in #wpadminbar .ab-top-secondary #wp-admin-bar-bp-notifications .ab-sub-wrapper {
    	left: -80px;
    	right: auto;
	}
}