Doesn’t work on mobile for me

BTW I wanted to avoid overflow on mobile. Instead now I just use this, does the trick for me:

#wp-toolbar {
  overflow: hidden;
}

Can you provide further details on what you got vs. what did you expected? This doesn’t give much to work from to help to improve it. Especially considering you said you went with something that appears to do nothing (at least on its own) in my testing like #wp-toolbar { overflow:hidden; } (I added this to a site where mobile menu items were wrapped onto new lines [spilling into the main site content] and they are still totally wrapping & spilling into the main content area after this was added on its own).

I wonder… are you actually having menu items wrap on mobile without Admin Bar Wrap Fix? Just wondering how simply adding #wp-toolbar { overflow: hidden; } appears to fix/avoid the bad wrapping behavior & other aspects this plugin takes into account (like not then totally cutting off other menu items that would otherwise be wrapping, etc.) Is there other code at play here if it actually does resolve the wrapping for you? My tests show that this code alone really doesn’t do what’s needed.

Also, if this one addition were to work… how would it allow the dropdown menus to show while then still having the horizontal listing of icons still show (while not wrapping) and/or not get cut off by this very basic overflow:hidden; (with both the icons & dropdowns both being within #wp-toolbar & not addressing the default behavior of the icons wrapping to new lines)…? This doesn’t account for the menu icons wrapping to new lines if nothing else is done… and then also doesn’t have any dimensions set for that #wp-toolbar { overflow:hidden; } to actually do anything (and if it were to cut off the icon wrap… how is that then not also cutting off the dropdown? Also, wouldn’t that make some of the items hidden by overflow:hidden; inaccessible like the user/profile item at the very right?). It just seems odd that you’re saying this isn’t working while then suggesting something that was definitely tried before (one of the first things that was considered) & determined to not work properly (or even do anything at all without more code being present and/or presents a pitfall where it causes other issues while trying to resolve another [per the various items listed above.])

– What’s expected –

I also ask because I checked a few sites just now and it worked on mobile as expected (while mobile could see some further refinement, this is true… I’d be curious to hear the details on what’s seen as necessary here & what trade-offs might need to be taken into consideration as a result of that.)

On desktop, it truncates the words to eventually just become icons if it really runs out of space. Meanwhile, on mobile, since they’ve already been reduced to icons, this uses overflow-x:scroll; & overflow-y:hidden; with flexbox being used to force all items to stay on one row (with those menu items being shortcuts to the site admin where one can then see more information rather than actually needing access to the dropdown that overflow-y:hidden; is currently cutting off to keep the mobile experience simple while still being able to see all of the primary menu items). So mobile has all items still accessible while it more-or-less becomes a horizontal carousel to see the items that would otherwise be inaccessible (by a basic overflow:hidden;) or wrap oddly (if nothing were to be done [definitely not expecting that to be a vertically scrolling area compared to horizontally scrollable.])

Again, this looks to be what’s happening on a few sites I checked. Was this not what you were getting (it becomes horizontally scrollable like a carousel on mobile to still be able to access all menu items)?

Also, where exactly did you expect dropdowns to come into play? Do you mean the dropdown that’s shown on menu items on hover that’s otherwise still accessible once you tap on the top-level item & are taken to the site admin where those elements should then also be offered? Those really weren’t seen as necessary since those main icons should take you to the site admin page where the items in the dropdown are likely then present (just doesn’t have as many shortcuts immediately available… definitely not functionality breaking or anything major [with it then making some sense that the UI has to be simplified to some degree to get things to work well on mobile.])

– Why there are no drop down menus for each of the menu items on mobile –

Also, the dropdown menus for each of the admin bar items not being shown was an unfortunate necessity (from what I’ve seen/tried) as having the menu bar be scrollable makes the dropdown menu items also want to become scrollable within the available menu bar space (since the dropdowns are children to the menu items & within the same container & everything) so there isn’t really a great way to still be able to access all admin bar items (horizontally scrolling making the most sense without totally overhauling things) while the dropdown menus each of those might have can still be accessible (then keeping in mind that most/all of those dropdown menu items are still entirely accessible once you’re taken to the site admin by tapping on the corresponding top-level admin bar item.)

Is there an approach other than the current method of making things horizontally scrollable to keep the menu items actually accessible, not wrap when too many items are present, and does keep the dropdowns accessible? It seems like the plugin currently has the best happy-medium approach, but I’m definitely interested in hearing what might work better (with #wp-toolbar { overflow:hidden; } falling short on a number of items… can’t implement a fix that introduces a fair number of regressions in the process.)

Again, I went with the happy-medium of all of the menu items are accessible (via horizontal scroll) on mobile while the dropdowns being inaccessible was a small concession to make since the top-level menu items are going to take you to where that info/actions are otherwise available rather than still having the menu items wrap & overlap the content area and/or have the top-level menu items become cutoff & inaccessible (while those also then not having their dropdown menus accessible at that point either.) I’d be open to other approaches & adjustments, but they can’t just ignore/regress some of the most important parts of this in order to meet one side request (of arguably lesser importance). I went with those top-level menu items at least being able to get some amount of presence while not taking up too much space, actually addressing the menu items wrapping, etc. without totally overhauling things (ex. could have an overflow menu where that becomes its own dropdown of all items that couldn’t fit with each having a dropdown… could have it be an off-canvas menu where it’s a simple toggle to show the complete admin bar menu on mobile that then gives it much more room to show everything… and many other ways it could be totally overhauled to work better, but that’s beyond the scope of what this is trying to achieve [simply patch what’s already there to avoid items wrapping & overlapping the main content area when there are too many admin bar menu items, make all top-level menu items accessible at all times, and not have it take up any more space than it currently does.)

Also, just to make it clear. My multiple tests of just using #wp-toolbar { overflow: hidden; } shows it doesn’t do pretty much anything (menu items still wrap onto new lines & overlap the content area with this being the only thing added [negating the entire point of this plugin & the bug being fixed here.])

This plugin does still seem like the best approach (at least make the top-level items show, not wrap, and not take up too much space without overhauling the menu completely) and this workaround instead of using this plugin shows you might not even need anything (not everyone has enough admin bar items where it then wraps to a new line depending on the site & the device being used.)

Definitely curious to hear more as that whole situation where you said #wp-toolbar { overflow: hidden; } is what you’re using instead has me confused (as, again, multiple test sites show this really isn’t doing anything at all without more code also being present which I’d be curious to see what that other code then is… or you don’t experience the item wrapping on mobile & that code snippet was a placebo & just didn’t realize it wasn’t needed on mobile.) Definitely odd.

I mean, one approach that could be considered (avoiding a total overhaul of things) is to have the mobile menu not use a horizontal scroll & instead have the individual menu items shrink as more items need to fit in the available space. It might be a bit tricky to implement, but this way could avoid needing to mess with overflow/scroll/hidden/etc., but that could leave tap targets being too small if enough items are wanting to be shown on a small enough screen so even then the horizontal scroll of top-level items (the items in the dropdowns then likely being a scroll or 1-2 taps away once in the site admin for that top-level item) might still be the way to go.

• This reply was modified 1 year, 10 months ago by KZeni.

Hello, so do I understand it right that dropdowns from the admin bar (when you tap on an item) are not supported by your plugin on mobile? The problem I had is not about menu items not being shown or overflowing. The problem was that some white space was appearing to the right of my website so a horizontal scrollbar appeared (on mobile). So instead of using your plugin I used the mentioned CSS and the whitespace disappeared. The user profile icon is still breaking nicely to the next line and the menu items are still dropping down when I tap on them. Does this answer your question?

Okay, so it sounds like you don’t mind the admin bar items wrapping onto a new line & therefore you shouldn’t need a plugin that helps prevent the admin bar items from wrapping to a new line. The need for this plugin can definitely vary on a site-by-site basis with some not needing it at all (especially if the theme/site has some additional CSS that could be affecting things as well.) There’s then a good handful of sites where this does clean things up in a way that’s needed, but it sounds like that isn’t the case for your site.

I was making sure it was stated why the dropdown menus not being shown on mobile was a necessary trade-off in order to prevent them from wrapping & overflowing beyond the admin bar’s area while then making it so each of the top-level admin bar items are still accessible (simply using overflow-x to scroll horizontally like a carousel which does then have that mobile dropdown menu trade-off [even though it wants to allow overflow-y to be visible… it’s a browser limitation & how overflow behaves at that point]) while there then isn’t a better alternative that’s been proposed that fits the sites that really warrant having this plugin that doesn’t completely overhaul the admin bar setup or otherwise tries to do too much.

Glad you found a solution that works for your site’s needs!

You can see how straightforward the current setup is at https://github.com/KZeni/Admin-Bar-Wrap-Fix/blob/master/admin-bar-wrap-fix.scss (the PHP code then simply enqueuing the CSS when the admin bar is being shown.)

Also, I misspoke about the mobile CSS having overflow-y visible & want to clarify. Having the dropdown try to still show & have overflow-y visible was causing a vertical scroll (which is definitely not a good user experience) due to that aforementioned browser limitation when overflow-x is needing to scroll (that then forces overflow-y to either be auto, scroll, or hidden instead of allowing overflow-y to be visible per the current behavior of browsers [with this limitation being part of the spec as detailed here: https://stackoverflow.com/a/6433475.) As such, I cleaned up that vertical scrolling oddity to just not try to show the dropdown (simplifying the tap behavior) nor allow overflow-y scrolling/auto on mobile (instead, having it simply be hidden) to better accommodate this current browser limitation.

I would happily update the plugin to show the drop downs & have overflow-y visible on mobile if/when that horizontal scrolling browser limitation is no longer a thing (which unfortunately doesn’t seem anytime soon per the W3C spec needing to be updated to allow this.)

Also, let me know if you know of a good way to have it where mobile admin bar items don’t wrap, are all still accessible, and will always have reasonably sized tap targets which then allows the dropdowns to still be present. I’m open to ideas & GitHub pull requests.

Hello thank you for understanding please also understand I do not have the time right now to deep dive into the technical reasoning why the drop down menus are not showing, I just wanted to report a major problem that I encoutered in your plugin. This is also relevant to other people maybe I should have written a review instead. The technical solution is up to you, good luck with that.

Ok, just noticed that dropdowns do not work with my “solution”. Now I am confused…

Yeah, that being proposed as a solution was confusing to me where it would either not do anything or do something & not show the dropdowns either.

That’s why I felt I needed to explain how this was what I first tried, myself, in developing this to then find I needed other considerations while then finding there wasn’t a good way to get all the icons to fit while still having dropdowns able to be shown (while that’s then a reasonable trade-off for some sites that really do want to make sure the icons don’t spill outside of the admin bar.)

Is there a particular item in one of these dropdowns that one can’t otherwise get to by navigating to the top-level icon’s corresponding site admin page and find/use it from there? I’m trying to judge the severity of not having the dropdowns show as fixing the admin bar spillover while keeping the dropdowns could/would greatly impact how this whole admin bar is currently implemented (restructuring how certain things are presented [have a “more” dropdown that relocated any 3rd party & otherwise secondary items to show in that new item’s dropdown while those then have their dropdowns be in a flyout/collapsible section from there, have the icons possibly shrink as more are added as long as the tap targets stay reasonably sized, etc.], etc.) and/or may need to effectively do a UI replacement, of sorts, to make it able to account for everything (like having it actually just become more of a single button that then has it show like a vertical menu of all of those top-level menu bar items that then have it act more like a mobile site navigation with expandable sections, possibly off-canvas or a more traditional dropdown from that main item, etc.) Again, how this can then be implemented will need some thought before acting on it as it will be a varying level of work to do, how nice it is as a UI for the users, and how tricky it might then be to keep it working with future WordPress updates & 3rd-party plugins.

Meanwhile, if most/everything one needs in those dropdowns can be found by navigating to one of those top-level items and finding/using it from there then that might be introducing more complexity than it’s really worth.