Mobile Drop-down Menu Items Not Clickable

[pjbovee]

Hi everyone,

I'm having an issue where drop-down items in my mobile navigation menu won't open. They work perfectly fine on desktop view, opening the drop-down, and the version of this menu on our regular site works just fine – clicking on the parent item opens up the "folder" which contains the items in the drop-down. This even works fine when testing in mobile view using Chrome Developer Tools.

I have found a few community posts that were similar to this, but none of the ideas in those seemed to work for me. My first thought was that something is covering the items, which is still probably the case, but I'm not a real coder-coder/developer-developer, so it's gotten past my expertise of really figuring this out.

The odd part is that, clicking on them does nothing, but I can force-click (tactile-click/hard-click) on my iPhone and it'll show the preview of what's supposed to be there.

As I mentioned, Developer Tools testing works fine. I'm using an iPhone 15 Pro in the real world and that's where it's not working.

Site is here (this will give you a 404, but it's just the blanket HubSpot catch for all of our HubSpot landers, etc.): go.angelsfoster.org.

Thanks so much for any help or ideas y'all can provide!

Cheers.

[GRajput]

Hi @pjbovee 

So when I checked the menu on my phone its working fine but I thought checking the issue for smaller screens so below 372 px the site navigations dosen't work. So whats happening is a 'open-menu-list' class is added in 'ul.hs-menu-children-wrapper'

when you click on the nav-items and then there is a style

@media (max-width: 767px) { .custom-menu-primary .hs-menu-wrapper ul li.child-open.hs-menu-item.hs-item-has-children>ul { transform: translate(0); } }

which is responsible to slide the dropdowns above the nav-items but below 372px the mentioned style is not coming thus your dropdowns don't slide to their place https://prnt.sc/zQFI72PQD7j2. As @Anton is mentioned its works in his iPhone because an iPhone's screen size is bigger so on any device whose screen size is below 372px your menu will not work. However, I did not find the reason why style disappeared. You will need a developer who can find this issue.

I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.
Thanks!

[Anton · Accepted solution]

Hi @pjbovee, 

tried it on my iPhone 14 Pro(iOS 17.6.1) in Chrome and Safari. 

What I'm experiencing:

• The mobile nav opens fine
• the folders are opening fine
• can't click on the link (like Fostering 101, Angels foster orientation video, FAQ...)

I'd assume it is related to the structure of your navigation since when I'm testing it on desktop and try to click, it indicates that I'm clicking on the li-element instead of the a/link one. 

Also: one thing I'd recommend is to make the clickable area of the mobile trigger button larger - recommended size for clickable elements on mobile are 48x48px. 

best, 

Anton