What could be causing the navigation menu links to not work on tablet and mobile devices for my Webflow website?

TL;DR
  • Open Webflow Designer in mobile/tablet breakpoints and test if nav links are clickable.  
  • Check interactions to ensure they don’t hide links, block pointer events, or alter z-index.  
  • Verify z-index and positioning so no other elements overlap the nav menu.  
  • Confirm display, opacity, and pointer-events are correctly set for nav links in mobile views.  
  • Review and reset body overflow settings in interactions or custom code if needed.  
  • Temporarily disable any custom code to rule out JavaScript conflicts.

If your navigation menu links aren’t working on tablet or mobile devices in Webflow, the issue is usually due to interactions, visibility settings, or z-index problems in mobile breakpoints.

​

1. Check the Mobile Menu’s Clickable Elements

​

  • Open your project in Webflow Designer.
  • Switch to Tablet or smaller breakpoints using the top bar.
  • Open the mobile navigation menu by clicking the hamburger icon in preview mode.
  • Click the links inside the menu to see if they are clickable or blocked.

​

2. Inspect Menu Open and Close Interactions

​

  • Go to Interactions Panel, check for interactions tied to the mobile menu (Trigger: Navbar menu open/close or Hamburger menu click).
  • Confirm that the interaction does not disable pointer events or hide links unexpectedly.
  • Look for steps that might change Opacity, Display, or Z-index of the menu or its parent container.

​

3. Review Z-Index and Positioning Layers

​

  • Select the nav menu, the dropdown container, and other surrounding elements.
  • Make sure the nav menu has a higher z-index than other overlapping sections (e.g., hero section, header image).
  • Ensure no other elements are absolutely or fixed-positioned above the menu on mobile.

​

4. Check Display and Opacity Settings in Breakpoints

​

  • Sometimes styles in desktop don’t properly cascade into mobile views.
  • On mobile and tablet breakpoints, check that the navigation links container is set to display: block or flex, not hidden.
  • Confirm opacity is 100% and pointer-events are enabled on menu items.

​

5. Disable Body Scroll Overflow Settings

​

  • If the menu opens in a full-screen overlay, developers often set overflow: hidden on the body.
  • If not reset properly on menu close, it may cause unclickable areas.
  • Check your interactions or custom code to ensure body overflow is only restricted when necessary.

​

6. Check for Custom Code Conflicts

​

  • If you’ve added custom JavaScript or jQuery tied to the menu, disable it temporarily to see if it resolves the issue.
  • Make sure no code is preventing default behavior of links or intercepting clicks improperly.

​

Summary

​

To fix non-working navigation links on mobile and tablet, check for interaction conflicts, z-index or overflow issues, and broken visibility settings. Use Webflow’s Designer in each breakpoint to verify that menu items are visible, properly positioned, and not obstructed by other elements.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Does Webflow support video backgrounds and how can I troubleshoot if the video is not showing up on my site?
How can I create shareable links for the pop-ups I created on Webflow, so that clicking on the links will open the pop-ups directly, without the need to click on the buttons?
What are the issues with Facebook Domain Verifications in Webflow custom code?
Why are my .ttf files not appearing when trying to upload a folder of Google's Roboto fonts to Webflow's custom fonts in site settings, even though the folder shows that it contains the files on my desktop? Any advice on what to do?
Can regular buttons be used to change tabs in Webflow?
How do I resolve the issue of custom code not taking effect when added to the header or footer of my Webflow site?
How can I achieve the preview effect for a website like in the "Discover" section within Webflow using an iframe? Can this be done with any site? Thank you.
How can I display a div that will only be visible to Internet Explorer users, including IE 11, on my Webflow site? The purpose of this div is to display a message saying "For the best experience, please open using Chrome, Firefox, or Safari. Thanks!"
Can Webflow integrate with a hotel booking calendar plugin or use custom codes for that purpose?
How can I make my background videos in Webflow scale responsively while maintaining their 16:9 ratio and original section margins?
How can I put the background video in Webflow behind everything? Why don't I get 4 cells when I create 4 columns in my quick stack in Webflow?
What is the solution for elements blurring and moving during animations in Webflow?
How can I fix the "Non-descriptive link content" error when publishing my web page in Webflow with social media icons implemented as SVG images?
Can I disable scroll events until an interaction timeline in Webflow is completed? Why do Webflow interactions abruptly end when switching browser tabs?
What is the process for optimizing images in Webflow?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?