Menu not working properly in mobile view

October 2015 Joomla Template
Rate this topic: Evaluations: 2, 1.00 on the average.Evaluations: 2, 1.00 on the average.Evaluations: 2, 1.00 on the average.Evaluations: 2, 1.00 on the average.Evaluations: 2, 1.00 on the average.1.00 out of 6 based on 2 vote(s)
GK User
Thu Nov 26, 2015 8:01 pm
Reply with quote
Report this post
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
User avatar
Gold Boarder

GK User
Fri Nov 27, 2015 5:18 pm
Reply with quote
Report this post
Hmm, I cannot reproduce this issue, could you please provide some more info? What phone (brand, os version) are you using?
User avatar
Moderator

GK User
Sat Nov 28, 2015 3:31 pm
Reply with quote
Report this post
Samsung Galaxy S4. The browser is called ''internet''. Android version 5.0.1
User avatar
Gold Boarder

GK User
Mon Nov 30, 2015 6:45 pm
Reply with quote
Report this post
Does the same problem happens on our demo server:
https://demo.gavick.com/joomla3/news/
?
User avatar
Moderator

GK User
Thu Dec 03, 2015 1:10 pm
Reply with quote
Report this post
Yes the same problem is in the demo.
User avatar
Gold Boarder

GK User
Mon Dec 07, 2015 11:00 am
Reply with quote
Report this post
I was able to reproduce this issue also on 5.0 so I'll report this issue to our devteam.
User avatar
Moderator

GK User
Mon Dec 07, 2015 11:02 am
Reply with quote
Report this post
I'll let you know when I'll get an answer.
User avatar
Moderator

GK User
Tue Dec 08, 2015 10:41 am
Reply with quote
Report this post
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.
User avatar
Moderator

GK User
Thu Dec 10, 2015 11:22 am
Reply with quote
Report this post
Thanx! Can't I just add it in the custom css field in the template settings?
User avatar
Gold Boarder

GK User
Thu Dec 10, 2015 7:13 pm
Reply with quote
Report this post
You can, but if you want to have more overrides, its easier to keep it in the file.
User avatar
Moderator

GK User
Fri Dec 11, 2015 8:43 pm
Reply with quote
Report this post
Ok, thanx!
User avatar
Gold Boarder

GK User
Mon Dec 14, 2015 3:14 pm
Reply with quote
Report this post
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.
User avatar
Moderator

GK User
Tue Dec 15, 2015 4:54 pm
Reply with quote
Report this post
Sounds great :)
User avatar
Gold Boarder

GK User
Wed Dec 16, 2015 8:44 pm
Reply with quote
Report this post
If you have any additional questions regarding this topic, please let me know.
User avatar
Moderator

GK User
Thu Dec 17, 2015 10:23 am
Reply with quote
Report this post
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.
User avatar
Gold Boarder

GK User
Mon Dec 21, 2015 10:47 am
Reply with quote
Report this post
The provided ur doesn't work anymore. Could you please provide current one?
User avatar
Moderator

GK User
Fri Dec 25, 2015 6:34 pm
Reply with quote
Report this post
User avatar
Gold Boarder

GK User
Sun Dec 27, 2015 7:31 pm
Reply with quote
Report this post
Can't reproduce the issue. Was the device in landscape or portrait mode? Does it also happen on iPhones or Android Phones?
User avatar
Moderator

GK User
Tue Dec 29, 2015 12:58 pm
Reply with quote
Report this post
Only on ipad. portrait mode
User avatar
Gold Boarder

GK User
Tue Dec 29, 2015 4:52 pm
Reply with quote
Report this post
I'm afraid I can't reproduce that issue. What exact version of iPad and iOS version are you using?
User avatar
Moderator

GK User
Tue Dec 29, 2015 5:03 pm
Reply with quote
Report this post
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?
User avatar
Moderator

GK User
Thu Dec 31, 2015 10:01 am
Reply with quote
Report this post
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;
}
User avatar
Moderator

GK User
Thu Dec 31, 2015 1:55 pm
Reply with quote
Report this post
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?
User avatar
Gold Boarder

GK User
Thu Dec 31, 2015 1:59 pm
Reply with quote
Report this post
I don't know exact date of the release. You can try provided solution which will be exactly same as one provided in update.
User avatar
Moderator

GK User
Fri Jan 01, 2016 6:49 pm
Reply with quote
Report this post
Ok, thanx!
User avatar
Gold Boarder


cron