Mobile Menu Issues - On Android...

User 122279 Photo


Senior Advisor
13,267 posts

I tried inserting the same menu as mentioned above into a rsd page. No problems navigating on Android. http://fjermeros.net/test-rsd/ And BTW, all my tests have been done on my half-size tablet with Android 4.1.2.

Rooky, you could perhaps check if the same ID or class name are used in more than one of your style sheets, but with different values. That can create problems if something has been overwritten by a style sheet further down. We seem to be left with the problem that the dropdowns close before you get time to select any of the submenus, and that it takes too long from touching a menu button until it becomes selected. So I think it is not that all the buttons send you to the home page, but rather that you actually never leave the home page. But why this happens just on Android devices is beyond me.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 2526084 Photo


Registered User
60 posts

Hi Inger, thank you for your continuing support.

I have tested your latest Menu Builder menu and can report it works fine on both PC and Android.

You mention that it might be a RSD style sheet issue, if this was the case would it not cause problems on a PC as well as an Android environment?

Within my RSD website all my menu html elements have a class name of html-nav with the ID left blank.

risk-assessments.org - Designed and Developed in CoffeeCup's Responsive Site Designer.
On Safe Lines QHSE Software - www.onsafelines.com
User 122279 Photo


Senior Advisor
13,267 posts

You are of course right about a possible style sheet issue. But it does happen that some browsers or operative systems are more 'forgiving' than others.

Since you got that menu I put into RSD to work, you probably have to look into the code you pasted from MB into RSD. Did you get all the end divs transferred across e.g.? Or, I don't use link targets unless I want a link to open in a separate window, maybe you ought to remove the targets? (also just a shot in the dark.)
Or, take a look at the menu width. It is set to 900px, but the buttons only take up 3/4 of that (they are set at 25%). You will better see that if you add a background colour to the menu (which you can remove after adjustments). Try setting the button width to 33%, and if that looks too wide, then reduce those 900px. Once the mobile navigation kicks in, I would definitely make the buttons 100% wide, and the mobile nav button too.

Just experiment, and you might all of a sudden get it right.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 2526084 Photo


Registered User
60 posts

Inger wrote:
Just experiment, and you might all of a sudden get it right.


This is about where I am, 'try this, try that' and see what happens mode :)

If I get an Einstein moment, I will feed-back to you.

risk-assessments.org - Designed and Developed in CoffeeCup's Responsive Site Designer.
On Safe Lines QHSE Software - www.onsafelines.com
User 122279 Photo


Senior Advisor
13,267 posts

;) Good luck!

And BTW, leave that http:// stuff on: http://risk-assessments.org or else the site will not be found by anyone clicking. The browsers will search for it within the CC site.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 2526084 Photo


Registered User
60 posts

Quick update...

I un-install and re-installed a clean copy of Menu Builder. Next, I downloaded a clean copy of the Menu Builder Canvas theme from the CoffeeCup support page. I then proceeded to add my RSD webpages to the Menu Builder menu structure. I changed no setting of the Canvas theme, just left everything as default.

I embed this clean Menu Build menu into RSD and copied the 'stage 1' html to each pages header section, next I copied the 'stage 2' html to each pages html-nav element, finally I added the theme folder link to the resource collection section.

Testing the new menu and it works perfectly on PCs, but again on Android devices the sub-menus just close automatically and quickly.

In my mind it's pointing to an issue with RSD that is causing problems with Menu Builder on Android devices...

http://www.risk-assessments.org - Designed and Developed in CoffeeCup's Responsive Site Designer.
On Safe Lines QHSE Software - www.onsafelines.com
User 2484360 Photo


Registered User
3,293 posts

Rooky wrote:
Quick update...

I un-install and re-installed a clean copy of Menu Builder. Next, I downloaded a clean copy of the Menu Builder Canvas theme from the CoffeeCup support page. I then proceeded to add my RSD webpages to the Menu Builder menu structure. I changed no setting of the Canvas theme, just left everything as default.

I embed this clean Menu Build menu into RSD and copied the 'stage 1' html to each pages header section, next I copied the 'stage 2' html to each pages html-nav element, finally I added the theme folder link to the resource collection section.

Testing the new menu and it works perfectly on PCs, but again on Android devices the sub-menus just close automatically and quickly.

In my mind it's pointing to an issue with RSD that is causing problems with Menu Builder on Android devices...

http://www.risk-assessments.org - Designed and Developed in CoffeeCup's Responsive Site Designer.


Copy and paste the following code into the HTML Element replacing what you have, and tell me if that works.

<!-- Start of the body content for CoffeeCup Menu Builder -->
<div id="menuBuilderContainer">
<div id="menuBuilder">
<button class="nav-button button bar"><i class="icon_menu_handle"></i><span class="text_menu_link">MENU</span></button>
<div id="nav" class="nav">
<ul id="mainmenu" class="nav-collapse">
<li id="menu_1" class="menu_1 menu_items">
<a href="http://www.risk-assessments.org/index.html">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">HOME</span>
</a></li>
<li id="menu_2" class="has-flyout menu_2 menu_items">
<a href="http://www.risk-assessments.org/risk-assessment-software-a.html">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">SOFTWARE</span>
</a>
<ul class="flyout submenu_menu_2 submenus" id="submenu_menu_2">
<li id="menu_2_sub_0" class="menu_2_sub_0 submenus_items submenu_menu_2_items">
<a href="http://www.risk-assessments.org/tira-risk-assessment-software.html">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">TIRA</span>
</a>
</li>
<li id="menu_2_sub_1" class="menu_2_sub_1 submenus_items submenu_menu_2_items">
<a href="http://www.risk-assessments.org/accident-investigation-software.html">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">AIM</span>
</a>
</li>
<li id="menu_2_sub_2" class="menu_2_sub_2 submenus_items submenu_menu_2_items">
<a href="http://www.risk-assessments.org/document-control-management-software.html">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">DICS</span>
</a>
</li><li id="menu_2_sub_3" class="menu_2_sub_3 submenus_items submenu_menu_2_items">
<a href="http://www.risk-assessments.org/absenteeism-management-software.html">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">SMART</span>
</a>
</li><li id="menu_2_sub_5" class="menu_2_sub_5 submenus_items submenu_menu_2_items">
<a href="http://www.risk-assessments.org/fire-premises-risk-assessment-management-software.html">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">FIRE</span>
</a>
</li></ul>
</li>
<li id="menu_3" class="menu_3 menu_items">
<a href="http://www.risk-assessments.org/about.html">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">ABOUT</span>
</a></li>
<li id="menu_4" class="has-flyout menu_4 menu_items">
<a href="http://www.risk-assessments.org/contact.html">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">CONTACT</span>
</a>

<ul id="submenu_menu_4" class="flyout submenu_menu_4 submenus"><li id="menu_4_sub_6" class="menu_4_sub_6 submenus_items submenu_menu_4_items">
<a href="http://www.risk-assessments.org/help.html">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">HELP</span>
</a>
</li><li id="menu_4_sub_7" class="menu_4_sub_7 submenus_items submenu_menu_4_items">
<a href="http://www.risk-assessments.org/terms-and-conditions.html">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">T&amp;Cs</span>
</a>
</li><li id="menu_4_sub_8" class="menu_4_sub_8 submenus_items submenu_menu_4_items">
<a href="http://www.risk-assessments.org/licenses.html">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">LICENSES</span>
</a>
</li><li id="menu_4_sub_9" class="menu_4_sub_9 submenus_items submenu_menu_4_items">
<a href="http://www.risk-assessments.org/software-refunds-policy.html">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">REFUNDS</span>
</a>
</li><li id="menu_4_sub_10" class="menu_4_sub_10 submenus_items submenu_menu_4_items">
<a href="http://www.risk-assessments.org/unlock-codes.html">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">UNLOCK</span>
</a>
</li><li id="menu_4_sub_11" class="menu_4_sub_11 submenus_items submenu_menu_4_items">
<a href="http://www.risk-assessments.org/seo.html">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">SEO</span>
</a>
</li></ul></li>
</ul>
</div>
</div>
</div>
<!-- End of the body content for CoffeeCup Menu Builder -->
User 122279 Photo


Senior Advisor
13,267 posts

Rooky, I think I've got it.

On the top menu buttons where you have dropdowns, delete the links on those top buttons. If the links are important, make another submenu button with them. Instead of this:
<li id="menu_2" class="has-flyout menu_2 menu_items">
<a href="http://www.risk-assessments.org/risk-assessment-software-a.html">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">SOFTWARE</span>
</a>

write this:
<li id="menu_2" class="has-flyout menu_2 menu_items">
<a href="#">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">SOFTWARE</span>
</a>

Change it the same way on the CONTACT button.
If this works as well for you as it does for me, MB and RSD are innocent, the problem lies with Android.

And BTW, you have a " too many at the end of this line, directly below the SOFTWARE button:
<ul class="flyout submenu_menu_2 submenus" id="submenu_menu_2" ">

Delete the last one.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 2526084 Photo


Registered User
60 posts

Success...
Inger wrote:
Rooky, I think I've got it.

On the top menu buttons where you have dropdowns, delete the links on those top buttons. If the links are important, make another submenu button with them. Instead of this:
<li id="menu_2" class="has-flyout menu_2 menu_items">
<a href="http://www.risk-assessments.org/risk-assessment-software-a.html">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">SOFTWARE</span>
</a>

write this:
<li id="menu_2" class="has-flyout menu_2 menu_items">
<a href="#">
<span class="icon_menu_handle"></span>
<span class="text_menu_link">SOFTWARE</span>
</a>

Change it the same way on the CONTACT button.
If this works as well for you as it does for me, MB and RSD are innocent, the problem lies with Android.

And BTW, you have a " too many at the end of this line, directly below the SOFTWARE button:
<ul class="flyout submenu_menu_2 submenus" id="submenu_menu_2" ">

Delete the last one.


As recommended within Menu Builder, I ensured any main menu button with sub-menu buttons was set with a href="#" in the URL link field. This had the effect on Android browsers of preventing the main button redirecting the navigation on the initial screen finger press. This is probably why the menu works perfectly in a PC, where the 'mouse over' event opens the sub-menu but the 'on-click' event is used to fire the redirect request...

The extra " that appears in the '<ul class="flyout submenu_menu_2 submenus" id="submenu_menu_2" ">' code is entered by Menu Builder itself. See attached image.

Thanks to everyone for there interest, support and willingness to help solve this issue, especially Inger :)

http://www.risk-assessments.org - Designed and Developed in CoffeeCup's Responsive Site Designer.

Attachments:
On Safe Lines QHSE Software - www.onsafelines.com
User 122279 Photo


Senior Advisor
13,267 posts

Glad we got there in the end! :)

That extra " has been reported earlier by someone, and in the version I have of MB it has been fixed.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.