[buddypress-trac] [BuddyPress] #5312: Dropdown menu overlap when screen size between 600px and 782px

[buddypress-trac]

#5312: Dropdown menu overlap when screen size between 600px and 782px
--------------------------------+------------------------------
 Reporter:  undergroundnetwork  |       Owner:
     Type:  defect (bug)        |      Status:  new
 Priority:  normal              |   Milestone:  Awaiting Review
Component:  Toolbar/BuddyBar    |     Version:  1.9
 Severity:  normal              |  Resolution:
 Keywords:                      |
--------------------------------+------------------------------

Comment (by 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;

         }
 }
 `

--
Ticket URL: <https://buddypress.trac.wordpress.org/ticket/5312#comment:1>
BuddyPress <http://buddypress.org/>
BuddyPress