Skip to:

Opened 11 years ago

Closed 11 years ago

Last modified 8 years ago

#5312 closed defect (bug) (no action required)

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

Reported by: undergroundnetwork's profile undergroundnetwork Owned by:
Milestone: Priority: normal
Severity: normal Version: 1.9
Component: Toolbar & Notifications Keywords:


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 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 site:



Change History (4)

#1 @undergroundnetwork
11 years ago

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;
Last edited 11 years ago by undergroundnetwork (previous) (diff)

#2 @undergroundnetwork
11 years ago

Since this is a Wordpress Core CSS issue, I created a ticket over at Wordpress's Trac site here:

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



#3 @r-a-y
11 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed

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

Closing as invalid.

#4 @DJPaul
8 years ago

  • Component changed from General - Toolbar/BuddyBar to Toolbar & Notifications
Note: See TracTickets for help on using tickets.