Menu not working properly in mobile view

Hi. The menu is not showing the see trough black background in the mobile view on my site. Can you please help fix it? My site is: http://islamnet.no/dev2/

See here:

mobile.jpg

Hmm, I cannot reproduce this issue, could you please provide some more info? What phone (brand, os version) are you using?

Samsung Galaxy S4. The browser is called ''internet''. Android version 5.0.1

Does the same problem happens on our demo server:
https://demo.gavick.com/joomla3/news/
?

Yes the same problem is in the demo.

I was able to reproduce this issue also on 5.0 so I'll report this issue to our devteam.

I'll let you know when I'll get an answer.

Please edit: /templates/gk_news_refreshed/css/override.css and add at its end:

Code: Select all

#gk-menu-overlay:before {
  content: ' ';
}


Remember to enable "CSS override" in template settings - advanced section.

Thanx! Can't I just add it in the custom css field in the template settings?

You can, but if you want to have more overrides, its easier to keep it in the file.

Ok, thanx!

The fix will be added to next template release so it should not happen anymore. Ps.. It was a pretty hard thing to figure it out, lucky I had an access to a similar device to debug it locally. By the way, all "Lolipop" Android devices used to have Chrome as a default browser but companies such as Samsung or LG still doesn't care and release shitty default browsers which doesn't behave as any standard browser.

Sounds great

If you have any additional questions regarding this topic, please let me know.

When I tried using the website menu on my ipad and scrolled, the black layer did not continue till the bottom of the ipad. Maybe that's a bug or is it supposed to be like that? It was like 1 cm less then the full screen.

The provided ur doesn't work anymore. Could you please provide current one?

Try now: www.islamnet.no

Can't reproduce the issue. Was the device in landscape or portrait mode? Does it also happen on iPhones or Android Phones?

Only on ipad. portrait mode

I'm afraid I can't reproduce that issue. What exact version of iPad and iOS version are you using?

Ok, after more research I have been able to reproduce corresponding issue:
1. Open site in any iOs device (iPad, iPhone, xCode iOS emulator)
2. Open mobile menu
3. Start scrolling down on the menu

While scrolling down both Safari's top and bottom bar dissapears - and then this gap in overlay can be seen. But as soon as I release my finger from the screen - this gap disappears.

Is this the issue you were trying to describe?

If yes, then int this file:
gk_news_refreshed/js/gk.menu.js
please find this block of code:

Code: Select all

       jQuery('#gk-menu-overlay-wrap').css('top', jQuery(window).scrollTop());
        jQuery('#gk-menu-overlay').addClass('gk-show');
        jQuery('#gk-menu-overlay-wrap').addClass('gk-show');


and add one line:

Code: Select all

       jQuery('#gk-menu-overlay-wrap').css('top', jQuery(window).scrollTop());
        jQuery('#gk-menu-overlay').addClass('gk-show');
      jQuery('#gk-menu-overlay').css('height', jQuery('body').outerHeight() + jQuery('#gk-menu-overlay-wrap').outerHeight() + "px");
        jQuery('#gk-menu-overlay-wrap').addClass('gk-show');


and in this file:
gk_news_refreshed/css/menu/menu.css
modify this declaration:
from:

Code: Select all

#gk-menu-overlay {
  background: rgba(66,66,66,0.9);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
}


to:

Code: Select all

#gk-menu-overlay {
  background: rgba(66,66,66,0.9);
  left: 0;
  min-height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10000;
}


Yes this is the issue I was describing. I am assuming this issue will be fixed in the next update of the template, right? When will it be out?

I don't know exact date of the release. You can try provided solution which will be exactly same as one provided in update.

Ok, thanx!