[Resolved] ipad menu not going on first click

[Andrew]

Hi All,

I noticed on an iPad my menu items require two clicks to go to the item. It’s treating the first click the same way it would treat hover on desktop. Is there a way to make it go on the first click, but retain the hover function on desktop?

[Leo]

Hi there,

Just checked on iPad and not noticing this issue.

Are you using the most recent version of GPP 1.5.6?

[Andrew]

Hi Leo,

Yes I’m using the latest GPP 1.5.6.

Sorry, I should have clarified that the menu has the issue when the iPad is held in a landscape orientation. The mobile slide out menu works fine in portrait.

[Tom]

If you disable the underline effect, does the issue go away?

[Andrew]

I temporarily removed the CSS and the issue went away. Is there a way to keep the underline effect and have it go on the first click on an iPad?

Thanks for all your help!

[Tom]

Can you re-post the CSS you’re using in here?

[Andrew]

Here’s all the CSS I’ve added…

.site-header {
display: none;
}

.menu-text {
position: relative;
}

.main-navigation .menu > .menu-item > a .menu-text::after {
content: “”;
position: absolute;
right: 20;
left: 50%;
bottom: -10px;
transform: translateX(-50%);
display: block;
width: 0;
height: 3.0px;
background-color: currentColor;
transition: 0.5s width ease, 500ms opacity ease;
opacity: 0;
}

.main-navigation .menu > .menu-item.current-menu-item > a .menu-text::after,
.main-navigation .menu > .menu-item.current-menu-ancestor > a .menu-text::after,
.main-navigation .menu > .menu-item > a:hover .menu-text::after {
width: 100%;
opacity: 1;
}

@media (max-width: 768px) {
.page-header-content {
height: auto !important;
min-height: 300px;
background-size: 100% auto;
}
}

[Tom]

iOS is weird when it comes to doing things on hover. If it detects an effect, it will treat a click like a hover event.

You can try changing this:

.main-navigation .menu > .menu-item > a:hover .menu-text::after

To this:

.main-navigation .menu > .menu-item:hover > a .menu-text::after

[Andrew]

That didn’t seem to change anything.
Is there any other way you can think of?

Thanks for all your effort on this.

[Tom]

Unfortunately it looks like JS is the only answer: https://stackoverflow.com/questions/3038898/ipad-iphone-hover-problem-causes-the-user-to-double-click-a-link

[Andrew]

Sorry I’m very new at all this. I’m having trouble figuring out what to do from the link. Could you clarify/guide me a little more.

[Tom]

You could try adding this to the wp_footer hook:

<script>
    jQuery('.main-navigation a').on('click touchend', function(e) {
        var el = $(this);
        var link = el.attr('href');
        window.location = link;
    });
</script>

[Andrew]

Worked like a charm. Thanks Tom, you’re awesome!

[Tom]

Glad I could help 🙂

[Author]

Posts