MOBILE menu selection buttons not activate page request

[Donahue]

www.genxwest.com
Using:
WP 5.2.1
PHP 7.2
X Pro
minimal plug-ins

Problem: RESPONSIVE MOBILE menu selection buttons not activate the pages requested.

Responsive Menu Example:

1. Top Menu, cannot access the About Page, but will access the last menu option.
2. Same with going to SEO through:
   Services > Marketing > SEO > SEO Consulting
   -only the SEO Consulting page opens up…even the Services top level page will not display.

[Prasant]

Hello Steve,

Thanks for writing in!

It seems that you are using inline navigation element. The issue you are reporting because those menu items have dropdown elements and on mobile if the page redirect to a different page, dropdown menus won’t work. For mobile screens, my suggestion would to consider Navigation Collapsed, Navigation Dropdown, Navigation Layered or Navigation Model element, depending on the requirement.

Thanks.

[Donahue]

Thanks for the suggestions! I will put them to the test.

Steve

[Prasant]

You are most welcome.

[Donahue]

Tested the menus on:
www.stevedonahue.ca
WordPress version 5.2.1
PHP version 7.2
Plug-ins: Gravity Forms, Slider Revolution
Iphone 6Plus
OS 12.3.1
Current menu is set to Navigational Modal.

So I tested the 4 nav menus. Here is what I found:

Usable - Navigation Collapsed
-will take you to the About page and other top level menu
-works well but takes up the whole mobile screen
-Pay attention to the Setup > Sub-Menu Trigger > Sub Indicator
-The subindicator setup icon was set to 25px to give the responsive screen UI something to aim for. Worked poorly.

Marginal - Navigation Dropdown
-will NOT take you to the About page and other top level menu
-extends past the mobile screen on default setting.

Marginal - Navigation Layered
-will take you to the About page and other top level menu only sometimes
-Pay attention to the Setup > Sub-Menu Trigger > Sub Indicator. This is the same configuration for Nav Collapsed but works 1 out of 20 attempts on my iPhone 6Plus.

Usable - Navigation Modal
-will take you to the About page and other top level menu
-works well but takes up the whole mobile screen
-Pay attention to the Setup > Sub-Menu Trigger > Sub Indicator
-about 1 in 20 attempts to access just the second level page worked on the About page. The subindicator setup icon was set to 25px to give the responsive screen UI something to aim for. No difference if it is 1px or 25px.

Steve

[christopher]

Hi Steve,

I see that you gave your feedback on different cases, but I am not sure what do you want in the end? I Checked the new domain name that you shared and it is now using the Navigation Modal.

Regarding the Navigation Modal, it supposed to take up the whole screen, that is how it is designed to do.

The Subindicator size should change so 1px should be different than 25px if you are talking about this option:

Please consider that the Subindicator mode is a matter of design and usage. You need to make it big enough, so the tapping on the indicator trigger and not go to the menu itself. You can also add a margin left using the Subindicator margin option so that there will be no chance that the tap triggers the menu itself.

Thank you.

[Donahue]

For RESPONSIVE menus - The suggestions worked well for Navigation Modal.

I am wondering though:

What does it take to get Navigation Inline to function in Responsive mode? If there are no drop-down pages the page will load. If there are drop downs it will load the very last one and none in-between.
For example: Services > Marketing > Marketing Technology > Analytics.
I can only get to Analytics. That’s 75% of my site inaccessible in responsive menu mode using Navigation Inline.

Thanks for your help.

Steve

[Donahue]

I applied the other navigation menus on another site and they work (www.stevedonahue.ca). Only the nav inline is quirky? It’s probably me, the human who is quirky!

Steveo

[ruenel]

Hello Steveo,

Please be advised that Navigation Inline and Navigation Dropdown element is more recommend only for the desktop screens. For smaller screens, you will have to use the Navigation Collapse, Navigation Layered or Navigation Modal. These elements are more appropriate to use in smaller screens because of its nature.

Hope this helps.

[Donahue]

This helps tremendously!

And, as developers find these things out, it gives them items for future bug-fix releases…possibly!

Appreciatively,

Steveo

[friech]

Hi Steveo,

I have a check that http://stevedonahue.ca site and I see that you use Navigation Modal even on a desktop view. You can actually have a Navigation Inline in Desktop and a Navigation Modal in Mobile by utilizing the Hide During Breakpoints feature of each element, the trick is to hide the Navigation Modal on large screen, and show it on smaller screen and vice versa with Navigation Inline.

Thanks,