Problems with Full height swipe-able menus

[Lew_Grothe]

We upgraded to the latest version of Discourse last week and were surprised when we had unwanted behavior on our theme on Android mobile.

On our theme, we have a header:

…which has a drop-down menu:

…which needs a z-index of 1010 to allow the drop-down buttons to over-write the header line below.

The old div.menu-panel.slide-in used to offset down the screen below the header. The new full-height feature merge uses the full screen for the menu but this shows up on our site as:

…for the profile popup and:

…for the hamburger popup.

I’ve done all that I can to set the z-index property on div.menu-panel.slide-in but I can’t seem to work - (perhaps dis-connected from other div’s by the animation?).

For now, I’ve kludged this on the production site by doing a kludge of:

div.menu-panel.slide-in {
   top: 108px !important; 
}

in the mobile css style but I hate this…

My requests/questions:

1. can we get an option to turn off this full-screen behavior? I think we prefer this, as I understand it, the UI shows up different on iPhones and Android and as a result, even if it worked with z-index as we want, the behavior is different for different users - it’s just one more support issue for helping the naive user.
2. is there (or could there be) a CSS selector to set this behavior and still have the full screen calculation dynamically set? It seems like, with my kludge, I’m probably breaking something when I force set the top of the menu-panel and the length is still calculated. If there is no way to set the z-index where we want (still open in my mind…), how could we both dynamically set the location of the top of the menu-panel and the length of the panel.
3. am I missing something entirely here?

Thank you for your great support of your great forum software…

[codinghorror (Jeff Atwood)]

I believe @featheredtoast can advise you on this.

[featheredtoast (Jeff Wong)]

Your fix works quite well actually for a temporary hold over. We’re aware of this issue with custom headers - I’ve got a planned fix to pin the top to the top of the header, and not top position 0 everywhere that should take care of this.

@Lew_Grothe

the UI shows up different on iPhones and Android

This is not true - Android and iOS don’t look different, the only difference between them is the ability to swipe the menus from the sides of the screen.

[Lew_Grothe]

@featheredtoast

This is not true - Android and iOS don’t look different, the only difference between them is the ability to swipe the menus from the sides of the screen.

Sorry - what I saw on a borrowed iPhone looked different than my Pixel 2xl - was probably because of CSS caching… Also, showed up different on emulator than actual Android device (but that is sometimes just the case and probably is also explained by caching or emulator weirdness…).

Do you have an issue # or something that we can track for your fix?

[featheredtoast (Jeff Wong)]

This will be in the latest version of Discourse with this PR:

https://github.com/discourse/discourse/pull/6845

The menu will now align itself to the top of the Discourse header, rather than absolute 0.