Is there an issue with the nav menu button on tablets and below, where it is unclickable when the menu is open, but works fine on desktops in Webflow?

Published on
September 22, 2023

The issue with the nav menu button on tablets and below, where it becomes unclickable when the menu is open, is a common problem that can occur in Webflow. It is usually caused by a conflict between the menu overlay and the button's click behavior. To fix this issue, you can follow these steps:

  1. Open your Webflow project and go to the affected page.
  2. Select the Nav Menu button element on the canvas.
  3. In the Style Panel, click on the "+" icon next to the "Element Settings" section to add a new custom attribute.
  4. Add the custom attribute called "onclick" and set its value to "return false;" (without the quotes). This prevents the default click behavior of the button.

Alternatively, if you are using interactions to open the menu, you can use the following steps:

  1. Open your Webflow project and go to the affected page.
  2. Select the Nav Menu button element on the canvas.
  3. In the Interactions Panel, create a new interaction for the button.
  4. In the "Initial State" of the interaction, add a "Display: None" action to hide the menu overlay.
  5. In the "Open" state of the interaction, add a "Display: Block" action to show the menu overlay.
  6. In the "Close" state of the interaction, add a "Display: None" action to hide the menu overlay.

By using these steps to modify the click behavior of the nav menu button, you should be able to resolve the issue of it becoming unclickable on tablets and below when the menu is open.