Dropdown menu overlap when screen size between 600px and 782px

[undergroundnetwork]

When Buddypress is active on a Wordpress 3.8 website and the screen size is between 600px and 782px between @media and min-width: 601px and @media and max-width: 782px there is overlap in the drop-down right side menu for all of the secondary logged in Buddypress 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 css coding in the plugin.

It has to do with .ab-sub-wrapper in the css, it needs a right: 100% or something similar to that to fix it.

This occurs on Safari, Firefox, and Chrome on the mac and the iPad mini (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:

Thanks!

Charles

[undergroundnetwork]

I figured out where the bug originates from and it's in the Wordpress core admin-bar.min.css so, perhaps this Trac is not the correct place to have talked about this bug?

Anyway, I'll post the fix.

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.

In the mean-time, if a person wants to fix their theme using a CSS override in their own theme's style.css, I came up with a solution, though I am not that knowledgable about css. This hack works, but may affect some other formatting, not sure, but it's only temporary until the core files are fixed anyway.

Place the following at the tail end of your theme's style.css:

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

[undergroundnetwork]

Since this is a Wordpress Core CSS issue, I created a ticket over at Wordpress's Trac site here: ​http://core.trac.wordpress.org/ticket/26720

Not sure if I should close this ticket here or not.

Thanks,

Charles

[r-a-y]

Thanks for digging around and finding out that this is a WordPress issue, undergroundnetwork.

Closing as invalid.