Solve empty menu in responsive display
Dear DJ Extensions,
Can you improve the mobile responsive functionality of DJ-MegaMenu? Normally the sticky menu should be replaced by the non-sticky menu when you reached the top of the page. Because this is not happening on modern high-resolution tablets, the non-sticky menu stays empty, leaving a white (empty) space on your site, which can look ugly. ▬► BUT: The problem occurs in a certain view mode, see short description:
Menu creates white/empty spaces on your site / does not work properly when you open the page in Portrait Mode and when you after that turn your screen to Landscape Mode. I speak about tablets where the non-mobile menu (like on desktop) shows up on Landscape Mode.
When you open your site (with DJ-MegaMenu installed) on a high-resolution tablet, the site has enough width in Landscape Mode to show the normal menu instead of the Mobile Menu (which you'll see in Portrait Mode).
DJ-Mega Menu will switch from Mobile Menu to normal menu when you turn the screen of your tablet. And that is where the problem occurs: On the normal menu as appeared on tablets.
Now, the normal menu, although you have set up 1 menu, it actually consists of 2 menus:
- A sticky menu that will always stay on top when you scroll down
- A non-sticky menu inside a module/template position when you reached the top of the page
So, in short:
- Normally the Mobile Menu should be replaced by the normal menu when you turn the screen of your tablet
- Normally the sticky menu should be replaced by the non-sticky menu when you reached the top of the page.
Test this on modern high-resolution tablets and you'll notice some problems.
▬► REPLICATION STEPS
1. Start with holding your tablet in Portrait Mode
2. Now open the website in this Mode
3. Turn your screen to Landscap Mode (see if the Mobile Menu is replaced by the normal menu)
4. Scroll down (see if the sticky menu shows up)
5. Scroll up
6. Reached the top of the page? A reasonable chance the sticky menu does not disappear and the non-sticky menu is now an empty white space (is not desired / could look ugly).
Devices / Os / Browsers showing this problem:
- Android Nexus 9 / 5.0 & Chrome Mobile 58
- iPad Air 2 / 8.1 & iPad Air 2 / 8.1
- iPad Mini Retina / 7.0 & Mobile Safari 7.0
it works correctly on:
- iPad 4 / 6.0 & Mobile Safari 6.0
- Android Nexus 7 / 4.2 & Chrome Mobile 57 (with default settings it never shows the normal menu, only the Mobile Menu)
I have not test other tablets and can not say whether the problem also occurs there.
NOTE: It most of the times works OK when you (re)open the page in Landscape Mode, but not in Portrait Mode. The problem occurs when you enter the page / (re)open the page in Portrait Mode and after that turn your screen to Landscape Mode.
I hope this could be a reason to improve things more. The less responsive errors, the happier the clients.
Thank you in advance for hopefully improving this,
That was fixed in this update: https://dj-extensions.com/blog/dj-megamenu/maintanance-update-for-joomla-mega-menu-version-3-6-2
Agent Mdm commented
Thank you. Works like a charm!
thank you for reporting this issue and describing the problem in details. We will fix it in the next release, so please stay tuned. If you want to test new version just please contact us via helpdesk or write directly to firstname.lastname@example.org