WordPress.org

Ready to get started?Download WordPress

Forums

Frisco for BuddyPress
Make admin bar fully responsive (5 posts)

  1. Memfis
    Member
    Posted 2 years ago #

    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/

  2. David Carson
    Member
    Theme Author

    Posted 2 years ago #

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

  3. David Carson
    Member
    Theme Author

    Posted 2 years ago #

    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.

  4. Ulrich
    Member
    Posted 2 years ago #

    Hi David,

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

  5. David Carson
    Member
    Theme Author

    Posted 2 years ago #

    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;
    	}
    }

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic