Front-end admin-bar dropdown menu overlap when screen size between 600px and 782px for logged in user with Buddypress submenus

[undergroundnetwork]

When Buddypress 1.9 is active on a Wordpress 3.8 website and the screen size is between 600px and 782px there is overlap in the drop-down right side menu for all of the secondary logged in Buddypress menu items, like Activity, Profile, etc.

I have attached a screenshot of this happening on the actual Buddypress.org website, so it is an issue with the actual css of Wordpress's admin-bar.css

To recreate it, log into a Wordpress site that also has Buddypress installed, adjust your browser width to between 600 and 782 then mouse-over the upper right corner menu, then mouse down to any activity menu item and you will see the overlap. You can recreate it at the actual Buddypress.org website as well by also logging in and doing the same.

This occurs on Safari, Firefox, and Chrome (on the Mac, not sure about PC) and the iPad (which has a screen size between those sizes which is how I discovered it.)

Here is a snapshot of the overlap occurring on the Buddypress.org site, to show that it is not a theme or user issue:

I posted this over in the Buddypress Bug Trac site (​http://buddypress.trac.wordpress.org/ticket/5312) thinking it was in the Buddypress plugin, but have since determined that it is in the Wordpress core css files.

Here is a simple fix for the problem.

In the Wordpress core file: wp-includes/css/admin-bar.css move lines 1040-1043

#wpadminbar #wp-admin-bar-my-account .ab-sub-wrapper {
right: 0;
left: auto;
}

out of the @media screen and ( max-width: 782px ) { area and place them in the @media screen and (max-width: 600px) { area.
So cut the above css out and paste it right after:
@media screen and (max-width: 600px) { so you end up with:

@media screen and (max-width: 600px) {
#wpadminbar #wp-admin-bar-my-account .ab-sub-wrapper {
right: 0;
left: auto;
}

This should also be done in the minified version of the same css file.
wp-includes/css/admin-bar.min.css lines 909-912
Search for:

#wpadminbar #wp-admin-bar-my-account .ab-sub-wrapper{right:0;left:auto}

cut it out and place it right after

@media screen and (max-width: 600px) {

so you end up with:

@media screen and (max-width: 600px) {#wpadminbar #wp-admin-bar-my-account .ab-sub-wrapper{right:0;left:auto}

That fixes the issue in the Wordpress admin css files.

In the mean-time, if a person wants to stop this from happening and doesn't want to alter the core css files, I came up with a CSS override that can be placed in the person's theme style.css. Not sure if this is the best temporary solution, but it seems to work for me:

@media (min-width: 601px)
{
#wpadminbar .ab-top-secondary .menupop li:hover>.ab-sub-wrapper, #wpadminbar .ab-top-secondary .menupop li.hover>.ab-sub-wrapper {
margin-left: 0 !important;
right: 100% !important;

}
}

[nacin]

Thanks for the report, undergroundnetwork.

[nacin]

Shifting this to 3.8.2 for further investigation. Currently have iammattthomas looking into it.

[iammattthomas]

It looks like those two CSS rules are duplicated; right: 0; left: auto is already set for .ab-sub-wrapper on line 161. Just removing it from the 782px media query seems to solve this.

[iammattthomas]

Fixing this exposed two other issues: at responsive sizes, the arrows indicating submenus were misaligned with the text, and at smartphone sizes, the submenus were hidden because they were being positioned outside the parent element.

[iammattthomas]

In 27006:

Responsive improvements to submenus in the adminbar:

• Remove .ab-sub-wrapper rules in the 782px media query, as they're duplicates of the rules set on line 161.
• Reposition the arrows for submenus at responsive sizes where the menus are taller.
• Set the submenu position to static at smartphone sizes, so it's not positioned outside of its parent (and thus offscreen).

Fixes #26720, props undergroundnetwork, iammattthomas.

[nacin]

Per IRC: iammattthomas tested this with both BuddyPress and multisite, both of which have their share of sub-menus.

[nacin]

In 27009:

Responsive improvements to submenus in the toolbar.

Merges [27006] to the 3.8 branch.

• Remove .ab-sub-wrapper rules in the 782px media query, as they're duplicates of the rules set on line 161.
• Reposition the arrows for submenus at responsive sizes where the menus are taller.
• Set the submenu position to static at smartphone sizes, so it's not positioned outside of its parent (and thus offscreen).

props undergroundnetwork, iammattthomas.
fixes #26720.

[johnjamesjacoby]

Confirmed fixed in 3.8 branch.

Also tweaked the BuddyPress.org and bbPress.org themes to better accommodate the larger toolbar height and recent z-index changes, fixing unexpected #header overlap in the above screenshots.

Thanks for helping!