admin bar overwrites theme menu when browser edge dragged to left

[dnessett]

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.

[sabernhardt]

Hi and welcome to WordPress Core Trac!

This should be the old core bug reported on ticket:28983 with crowded toolbars, not (directly) related to the theme. If you shrink the browser width a bit more, I expect the Forms link likewise drops down to the next line (on the left).

For a quick fix, you could try the ​Admin Bar Wrap Fix plugin. The Yoast link is one of the smallest here, but I know they allow removing the toolbar link if you want to do that instead. Other plugins might have a hide/remove setting for their links, too.

The latest patch on the other ticket attempts to keep everything within the one line by shrinking links, as the plugin does. That could be better than allowing two lines. If you have anything to add to the discussion, please follow #28983.

[dnessett]

Thanks. I will experiment with the Admin Bar Wrap Fix plugin.