Mobile Menu Sub Indicator Arrows Not Working

Support
#1

We have our Sub Menu Trigger set to “Sub indicator” in our mobile menu setup settings, but on mobile devices, when we click on the sub indicator arrow to the right of the parent link it never expands the sub menu links. Instead it always triggers the parent link. We have WordPress 5.0.3 installed and theme is Pro version 2.4.6 using a child theme. See attached screenshot for reference.

#2

Hi Clark,

Thank you for writing in, the issue there is the sub-indicator is too tiny on mobile and it’s hard to tap accurately, please make your indicator bigger on mobile.

Try adding this to the Navigation Collapsed’s Element CSS area

@media (max-width: 979px) {
	$el.x-menu > li > .x-anchor .x-anchor-sub-indicator {
	  font-size: 1.75em;
	}
}

Hope it helps,
Cheers!

#3

Thanks for the quick reply.

That CSS snippet helped enlarge the arrows. Now, if we are really carefully and accurate, we can trigger the sub indicator, but most of the time we are still triggering the parent link.

Is there any way we can add horizontal or just left padding around the sub indicator arrows to increase the trigger area around the sub indicator arrows?

#4

Hi Clark,

Could you please try adding the following CSS rule and see if that helps.

.sub-menu .x-anchor .x-anchor-sub-indicator {
    padding-left: 50px;
}

Thanks!

#5

Do I add this to the Navigation Collapsed’s Element CSS area or our child theme stylesheet?

#6

Hello Clark,

Thanks for updating the thread.

You can add the CSS under Child theme CSS file under Appearance > Editor or in Theme Options panel under Pro > Theme Options > CSS.

Thanks.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.