#26720 closed defect (bug) (fixed)
Front-end admin-bar dropdown menu overlap when screen size between 600px and 782px for logged in user with Buddypress submenus
Reported by: |
|
Owned by: |
|
---|---|---|---|
Milestone: | 3.8.1 | Priority: | normal |
Severity: | normal | Version: | 3.8 |
Component: | Toolbar | Keywords: | has-patch commit fixed-major |
Focuses: | ui | Cc: |
Description
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; } }
Attachments (3)
Change History (13)
#1
@
7 years ago
- Component changed from General to Toolbar
- Keywords ui-focus added
- Milestone changed from Awaiting Review to 3.8.1
- Owner set to nacin
- Status changed from new to assigned
This ticket was mentioned in IRC in #wordpress-dev by nacin. View the logs.
7 years ago
#3
@
7 years ago
- Milestone changed from 3.8.1 to 3.8.2
Shifting this to 3.8.2 for further investigation. Currently have iammattthomas looking into it.
#4
@
7 years ago
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.
#5
@
7 years ago
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.
#7
@
7 years ago
- Keywords has-patch commit fixed-major added
- Milestone changed from 3.8.2 to 3.8.1
- Resolution fixed deleted
- Status changed from closed to reopened
Thanks for the report, undergroundnetwork.