Links requiring 3 clicks on Mobile

[lol_no]

On mobile, links on my website in the nav menu require 3 clicks(touched) before they are selected. http://meliorlab.tech

Live preview link: https://preview.webflow.com/preview/melior-website-95b348?utm_medium=preview_link&utm_source=designer&utm_content=melior-website-95b348&preview=4abae7374bbd6748283d8ff981de999e&mode=preview

[Waldo (Waldo Broodrÿk)]

Great question! @lol_no

Those additional clicks are the result of the hover styles created on the desktop breakpoint. Since there isn’t a hover state on most touch screen devices, it can cause this type of behavior (where the taps count as the hover state).

My recommendation would be to:

• Go to the “Tablet” breakpoint
• Then select your primary navbar-link class (make sure there aren’t other classes on the element when you’re styling here so that it can be done once and be complete)
• Go to the hover state and remove the font color style and the 20px transform style

That should reduce the taps required on tablet devices and the breakpoints below (unless additional styles are added at smaller breakpoints).

Here is a quick video walk through of the fix ➞

Please let me know if this is helpful or if you have any additional questions.
I’m happy to help you further!

[lol_no]

Thank you i’ve fixed this. My webflow site has randomly been behaving rather strangely lately. I have fixed most of the issues but currently my buttons on this page are not behaving like the others.

The “Book a free call” and “email us” button animations are not behaving like they do on other pages.

Broken Blog Button: What A Finance Company In The Caribbean's Website Should Look Like in 2023 | Melior

Button on home page: https://www.meliorlab.tech/

How the button should behave on Hover:

How it behaves on the blog page:

How the button behaves on Hover:

[Waldo (Waldo Broodrÿk)]

I’m glad to hear that helped with the mobile navigation!

Usually when I run into an interaction behaving differently on one page compared to another, I’ll try duplicating the parent element and pasting that into the other page to troubleshoot it.

It looks like setting the top-button-wrap class to have a width of 100% should fill that full space. You can also change the text-color in the top-button-wrap interaction or via a hover state. Changing the icon on hover can be done with a display: none, display: inline interaction.

I hope that this helps! Happy designing!