[UX] Drop-down menus: 1st item in long menus is hidden under the admin bar.

[klonos]

Follow-up to #2107 ...with the SmartMenus in core, long drop-down menus are handled pretty well:

...the only issue as you see is that if the the first item is scrolled over the top of the viewport, than it get hidden behind the admin bar.

Not so serious, as it will only affect the site admin (other users don't normally have permission to view the admin bar at all). Can also be easily solved with a z-index increase I guess so that the menu is over the admin bar 😉

As with #2160, if we can solve this before 1.5.0, good. If not, then 1.5.1 as a usability bug 😉

PS: I can't wait to test SmartMenus on admin bar. It will most likely solve #520 / #1001

---

PR by @klonos backdrop/backdrop#1684

[quicksketch]

Yeah this is just a z-index issue. The problem we have is that the entire admin menu is given a very high z-index, because when it's opened we want it to display over the top of other things (including the SmartMenu in the body). We'll need specific targeting on the sub-menus of SmartMenu to be over Admin Bar.

[klonos]

...turns out the dropdown menus receive an inline z-index of 1001 upon expanding (via JS) while admin bar has 999, so this issue shouldn't be happening at all. Right?

[klonos]

...The z-index is applied upon menu expansion, but removed upon starting the scroll. Huh.

[klonos]

...filed an issue upstream.

[vadikom]

This should be quite simple to fix but please provide me with some kind of test URL (or explain how I could run a test case locally) so that I could test and verify the best solution. In the worst case it might involve a couple of JS lines since, as far as I understand, you would like your admin bar sub menus to appear over the SmartMenus bar but still the SmartMenus sub menus should appear over the admin bar.

[klonos]

Thanx for taking the time to respond @vadikom and for offering to help with this.

you would like your admin bar sub menus to appear over the SmartMenus bar but still the SmartMenus sub menus should appear over the admin bar.

Precisely! I just filed a PR with my previous attempt to solve the issue (using only CSS). Our admin bar has a z-index of 999, so I am trying to set all menu items on the SmartMenus-rendered menu after the 2nd level to a z-index of 1000.

Each PR filed against Backdrop core creates a sandbox installation that we can test. Here's the link to the one I created and the credentials for it:

Website: http://1684.backdrop.backdrop.qa.backdropcms.org
Username: admin
Password: XUQSwqbX

...I have already created a "very long menu" to help you out with your testing.

[klonos]

The <ul> in the sandbox seems to be getting a z-index of 999 (same as the admin bar). Huh?!

[vadikom]

OK, you could achieve it via CSS too - for example, you could add the following:

.js .menu-dropdown {
  z-index: auto;
}

.js .menu-dropdown ul {
  z-index: 1000;
}

in your "menu-dropdown.css".

In case you need to set specific z-index for .menu-dropdown other than auto then a JS solution would be needed that would temporary set the z-index for .menu-dropdown to a higher value than the one used to your admin bar when a sub menu has to be displayed.

BTW, I saw you have edited the default z-index in "sm-core-css.css" - please note that in general it is not recommended editing "sm-core-css.css" at all since in some case that file might be changed on new version release and it would make it harder for you to upgrade if you need to in the future.

[jenlampton]

No PR, removing milestone.

[stpaultim]

Just noticed that there does appear to be a PR for this issue, but it's a very old PR and I can see problems with it right off the bat. Someone should probably verify this issue on a more recent version of Backdrop and then give the PR additional attention.