No hamburgerbutton on mobile browser using panelnav menu: no media queries parsed
40 views
Skip to first unread message
klipperx
Apr 24, 2018, 7:07:05 PM4/24/18
to Master Bootstrap
Hi Gonzalo
I'm struggling with a weird problem with the panelnav menu.
I created in the masterbootstrap template (v. 3.3.7) a mainmenu and a corresponding panelnav menu.
When I test the menu's in desktop mode the mainmenu shows correct.
When I use the Firefox (59.02) Web Developer Tool 'Responsive Design Mode' I get the hamburger button and when I push this button the panelmenu shows fine.
But when I access the page (multiple setups localhost and online) with my mobile browsers (Firefox 59.0.2 mobile and Chrome) on my Android Phone I don't get the hamburger button. and I still get the desktop menu. Now with two different type of actions I get my hamburger button in my mobile browser, and from there the panelnav menu works correct too:
1.) When I load the page on my phone, I don't see the hamburger, but when I scroll down half a screen and up the hamburgerbutton show up.
2.) When I connect my phone with USB to my laptop and activate the Firefox Webide (ADB helper) I can see what files are loaded and parsed. In the inspector I can now detect that no CSS mediaqueries are parsed. When I simply change only one css value in the inspector the hamburger button shows up in the mobile browser and the panelnav menu works OK again.
So I assume there must be something wrong in the Masterbootstrap code loaded in the mobile browser, preventing the browser to parse all CSS mediaqueries.
I think it's a bug. The weird thing is: Why does everything work OK at the desktop laptop browser in Responsive Design Mode, also after refreshing the page bypassing browsercache, and why are execution of the mediaqueries blocked at loadtime at initial load.
Of course I tried loading other websites containing media queries in the mobile browsers and they all show up great. So it must be a MasterBootstrap issue.
I experience this problem on complete different testsites set up on localhost en onlinehost.
Hope you can reproduce the bug and solve it.
Regards,
Klipper
I'm struggling with a weird problem with the panelnav menu.
I created in the masterbootstrap template (v. 3.3.7) a mainmenu and a corresponding panelnav menu.
When I test the menu's in desktop mode the mainmenu shows correct.
When I use the Firefox (59.02) Web Developer Tool 'Responsive Design Mode' I get the hamburger button and when I push this button the panelmenu shows fine.
But when I access the page (multiple setups localhost and online) with my mobile browsers (Firefox 59.0.2 mobile and Chrome) on my Android Phone I don't get the hamburger button. and I still get the desktop menu. Now with two different type of actions I get my hamburger button in my mobile browser, and from there the panelnav menu works correct too:
1.) When I load the page on my phone, I don't see the hamburger, but when I scroll down half a screen and up the hamburgerbutton show up.
2.) When I connect my phone with USB to my laptop and activate the Firefox Webide (ADB helper) I can see what files are loaded and parsed. In the inspector I can now detect that no CSS mediaqueries are parsed. When I simply change only one css value in the inspector the hamburger button shows up in the mobile browser and the panelnav menu works OK again.
So I assume there must be something wrong in the Masterbootstrap code loaded in the mobile browser, preventing the browser to parse all CSS mediaqueries.
I think it's a bug. The weird thing is: Why does everything work OK at the desktop laptop browser in Responsive Design Mode, also after refreshing the page bypassing browsercache, and why are execution of the mediaqueries blocked at loadtime at initial load.
Of course I tried loading other websites containing media queries in the mobile browsers and they all show up great. So it must be a MasterBootstrap issue.
I experience this problem on complete different testsites set up on localhost en onlinehost.
Hope you can reproduce the bug and solve it.
Regards,
Klipper
klipperx
Apr 30, 2018, 12:49:53 PM4/30/18
to Master Bootstrap
Hi Gonzalo,
After hours of searching and testing I finally found the bug in the Masterboot template:
It is a very simple bug, very easy to fix.
The bug was triggered by the wrong order of the head in de file /includes/head.php.
Original code:
Fixed code:
The difference is simply the place of the meta-viewport element in the <head>
In the original source it's written in the head as the last entry. But it must sit on top of the head!!!
Best regards,
Klipper
Op woensdag 25 april 2018 01:07:05 UTC+2 schreef klipperx:
After hours of searching and testing I finally found the bug in the Masterboot template:
It is a very simple bug, very easy to fix.
The bug was triggered by the wrong order of the head in de file /includes/head.php.
Original code:
<?php
defined('_JEXEC') or die;
JHtml::_('bootstrap.framework');
?>
<head>
<jdoc:include type="head" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>Fixed code:
Geef de code hier op...<?php
defined('_JEXEC') or die;
JHtml::_('bootstrap.framework');
?>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<jdoc:include type="head" />
</head>The difference is simply the place of the meta-viewport element in the <head>
In the original source it's written in the head as the last entry. But it must sit on top of the head!!!
Best regards,
Klipper
Op woensdag 25 april 2018 01:07:05 UTC+2 schreef klipperx:
Gonzalo Suez
Apr 30, 2018, 1:14:09 PM4/30/18
to Master Bootstrap
Hi Klipper!
I check this issue, but I don`t get an error on my phone. I use android v8 and chrome.
Hamburguer button it`s ok, working. masterbootstrap.com page, have v 1.2.4.
This situation it`s strange, I had not seen it.
Whatever, you can download MB last version, and create a new installation in you server, for confirm.
Best regards
klipperx
Apr 30, 2018, 4:09:29 PM4/30/18
to Master Bootstrap
Hi Gonzalo,
I checkt the head.php file on your github project. And there the meta viewport rule is below the jdoc type="head "rule, and that is wrong order! Because of that the, browser read this meta viewport rule too late. You should change the order so that the meta viewport will be on top in the HTML head innstead of the bottom.
I checkt the head.php file on your github project. And there the meta viewport rule is below the jdoc type="head "rule, and that is wrong order! Because of that the, browser read this meta viewport rule too late. You should change the order so that the meta viewport will be on top in the HTML head innstead of the bottom.
Best regards,
Klipper
Op woensdag 25 april 2018 01:07:05 UTC+2 schreef klipperx:
Hi Gonzalo
Reply all
Reply to author
Forward
0 new messages