[wp-trac] [WordPress Trac] #26720: Front-end admin-bar dropdown menu overlap when screen size between 600px and 782px for logged in user with Buddypress submenus

[WordPress Trac]

#26720: Front-end admin-bar dropdown menu overlap when screen size between 600px
and 782px for logged in user with Buddypress submenus
--------------------------------+-----------------------------
 Reporter:  undergroundnetwork  |      Owner:
     Type:  defect (bug)        |     Status:  new
 Priority:  normal              |  Milestone:  Awaiting Review
Component:  General             |    Version:  3.8
 Severity:  normal              |   Keywords:
--------------------------------+-----------------------------
 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:

 [[Image(http://media.underground.net/images/bpoverlap.png)]]

 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;

 }
 }
 }}}

--
Ticket URL: <http://core.trac.wordpress.org/ticket/26720>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software