Are you up for a challenge?! There’s this CSS issue that I can’t seem to figure out. After spending about 3 hours on it, I decided to change gears and seek more interactive help. Rather than going back and forth on the forum, though, I thought it might be more fun as a challenge you can actually put your hands on. So, here it is!
When an admin bar menu has a lot of entries, some of them may become inaccessible. The menu is simply cut short to fit in the viewport. No scroll bar appears. I’ve been able to get the scroll bar working, but, when it is present, the submenu fly-outs don’t work. I’ve tried every
overflow tweak I could think of and nothing has worked completely.
To give you a working canvas on which to devise a solution, I’ve written a simple plugin, CSS Menu Challenge. The plugin creates two menus in the admin bar, Animals and Autos, which you can use to compare and contrast as you go.
The Animals menu is very long and scrolls out of the viewport, making the last entries inaccessible. The first item has a few sub-items while the others do not.
The Autos menu only has a few items and each has item has sub-items.
The plugin enqueues a CSS file and a JS file. Both files can be found in the
In either the CSS or JS file (or both) devise a solution that accomplishes the following objectives.
- Uses the most generic selectors for targeting. The same rules should target both menus.
- Adds a scrollbar to the menu, but, only when necessary. In other words, the Animals menu will have it, the Autos menu will not.
- Only implements a vertical scroll bar, and not a horizontal scroll bar.
- Scroll bar existence does not break the fly-out behavior of the submenu items.
So, that’s it…
I hope someone’s up for this challenge! Seems simple, I know. And
maybe hopefully it is! Sadly, there’s no actual prize involved in this challenge. Well, I mean, unless you consider being an awesome solver of problems a prize, then there’s that!
If you have any questions, ask away! Or, if you come up with a solution, you can post your CSS/JS/both right here on the thread. If you’d like to discuss the pros/cons of menu sizes, please start a new thread.