[wp-trac] [WordPress Trac] #53933: admin bar overwrites theme menu when browser edge dragged to left

[WordPress Trac]

#53933: admin bar overwrites theme menu when browser edge dragged to left
--------------------------+-----------------------------
 Reporter:  dnessett      |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  General       |    Version:  5.7.2
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 I believe I may have found a bug in the WordPress core implementation.
 When the width of a browser window is reduced, the items in the admin bar
 are overwriting items in the Enfold top menu, Enfold being the theme
 employed by our site. I have discussed the problem with the Enfold
 maintainers and WordPress.org support, which led to the conclusion that
 the problem is with WordPress core. The discussion on the Enfold theme
 forum may be found here: https://kriesi.at/support/topic/top-bar-
 overwriting-the-top-menu/#post-1314745. The discussion with WordPress.org
 support may be found here: https://wordpress.org/support/topic/admin-bar-
 overwrites-top-menu-when-browser-width-reduced/#post-14758726

 The normal situation with a wide browser window is shown in the following
 image:

 https://drive.google.com/file/d/1CfkWRAx2v3kv2fwsohyDIeGEkwZvfSDA/view?usp=sharing

 When the browser window is narrowed by dragging the right hand side of the
 browser window to the left, the admin bar elements on the right drop down
 overwrite the Enfold top menu items, as shown in the following image:

 https://drive.google.com/file/d/15lhI5awCfCZMq17uzXIAccM4Uw-
 2HrBO/view?usp=sharing

 In detail, when the admin bar right side is forced into the middle, it
 encounters other admin bar items. Instead of expanding the vertical height
 of the admin bar and then writing the right hand items below the left hand
 items, the code controlling its style is placing the right hand items in
 the next vertical space, which holds the top menu items.

 I understand that plugins add elements to the admin bar and therefore it
 is not possible for you to control when the items the core places there
 (e.g., the “Howdy, …” item) “hit” those plugin elements when the right
 edge of the browser is brought to the left. However, I do think the
 behavior of the admin bar is under your control.

 For example, when the right hand edge of the browser window is moved to
 the left, eventually, the “Howdy,…” item collides with items on the left.
 At that point, the styling of the admin bar comes into play. Specifically,
 it drops the “Howdy, …” item down into space inhabited by the Enfold top
 menu, which causes the overwriting. Again, I don’t know how the styling of
 the top bar is implemented, but it seems to me when this collision occurs,
 the code could double the vertical space allocated to the admin bar,
 allowing the items on the right to drop down without leaving the confines
 of the admin bar.

 If this is not possible, then at least it should be possible to provide
 configuration control of the admin bar that allows sites to increase the
 vertical space allocated to it. While this would increase this vertical
 space unconditionally, at least it should solve the collision problem.

 I did a search of outstanding bugs and found nothing that covered this
 problem. The only bug report that is related is:
 https://core.trac.wordpress.org/ticket/52939. However, this bug reports
 problems with theme styling interfering with admin bar styling. The bug I
 am reporting concerns admin bar styling interfering with theme styling.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/53933>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform