How do I get top Nav items to navigate and not only open to sub nav items on mobile?

[ENBertussi]

Hey Apex Krew!

I am seeing an issue where mobile users are not able to click on top level nav items and only open up and navigate or click on sub nav items…

the site we are experiencing this problem with is https://thegolfersacademy.ca/ I did also read https://theme.co/apex/forum/t/mobile-menu-top-level-link-only-opens-submenu/45553 but I am uncertain where the code suggested should be inserted. We tried inserting it into “Global JS in the /pro/#/options” aka ‘theme options’

should it go in child theme functions? did we put it in the wrong place?
css on the nav?
is there a js for nav?

I checked another site and realised this is a mobile navigatin ui/ux issue too…
what i would expect is if somebody clicks on the top link they get taken to the page
and if someone clicks on the arrow it opens up the sub nav…

not sure what we are doing wrong.

Thanks for any help you can give us.

[ruenel]

Hello Erich,

Thanks for writing in!

You do not need any code if you are using the latest version. Simply edit your header and in your navigation settings, please specify your “SubMenu Trigger”. By default, it is set as Anchor which means that you cannot click the link. When you click it, it just opens the submenu. You must select “Sub Indicator” so that the link will work.

We would love to know if this has worked for you. Thank you.

[ENBertussi]

It looks like our menus are indeed using the ‘sub indicator’ setting but it does not appear to be working.

when clicking on top level navigation items on mobile it still only opens and shows sub menu items instead of giving the ability to navigate to the clicked on top level nav item web page.

[rad]

Hi Erich,

It seems to be still Anchor as trigger based on the trigger data, would you mind providing your admin login credentials in the secure not for further testing?

Thanks!

[ENBertussi]

I have added a secure note to my previous post with credentials.

Let me know what you find, I think we have this issue on other sites too…

thanks a tonne for your help!

ENB…//

[rad]

Hi Erich,

It still set to anchor, please check this

You have two header bar, one is assigned to home page then another for global. You only change the one for home page, please change it on another header.

But yes, it will not link or redirect to the page if you’re testing it within the header builder, that’s intentional so the builder preview won’t go anywhere

Thanks!

[ENBertussi]

I still can’t click on the top item and or click on the arrow and see the sub items.
it’s either or.

I don’t understand what we’re doing wrong with being able to see the submenu items when clicking on the arrow to the right of the top nav item and also be able to click on the nav item and go to it’s page.

it always comes back either/or, just not both functionalities that I figured would be an easy default…

thanks for helping us solve this bizarre mystery.

[ENBertussi]

Ok on further analysis it seems like it sometimes, only sometimes works, and what we believe is happening is it will let you spawn the subnav items if you (with our current settings) click really really carefully on the arrow graphic to the far right of the main nav item with sub items…

we’re going to try a different graphic for the arrow one that has more meat to it to see if that can hack the UI problem…

…10 minutes later…

I still don’t understand what is going on with this bug or why the settings don’t seem to do what you say they should.

Here is what we are doing to ‘hack’ making it work…

We have found a way to make the mobile phone UX better by using a large graphic for the indicator, this seems to be sort of fixing the problem. but it’s not ideal…

Let me know why it seems like we have to make an obnoxiously large icon in order to be functional on mobile…

enb…//

[paul.r]

Hi Erich,

For your top links, try to use margin instead of padding.

Adding padding to your top links is making the clickable area of your parent menu item big and clicking on the top or bottom of the sub indicator triggers the parent menu item.

Hope this helps