WordPress.org

Support

Support » Themes and Templates » [Theme: Frisco for BuddyPress] Make admin bar fully responsive

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

  • Hi,

    Does anyone know how to make the default Buddypress or WordPress 3.3 admin bar fully responsive? Both admin bars shrink down a little (the WordPress admin bar shrinks more than Buddypress’), but not completely. This leaves over 50% of the admin bar off screen. Everything else for the template responds to the width of the browser except the admin bars.

    http://wordpress.org/extend/themes/frisco-for-buddypress/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author David Carson

    @davidtcarson

    #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.

    Theme Author David Carson

    @davidtcarson

    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.

    Ulrich

    @grapplerulrich

    WordPress Contributor

    Hi David,

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

    Theme Author David Carson

    @davidtcarson

    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;
    	}
    }
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘[Theme: Frisco for BuddyPress] Make admin bar fully responsive’ is closed to new replies.