How can I fix the issue with my Webflow dropdown menu not expanding in Chrome, even though it works in Firefox and Edge?

TL;DR
  • Ensure parent containers have Overflow set to Visible to prevent clipping.  
  • Check z-index and position settings so the dropdown appears above other elements.  
  • Temporarily disable custom interactions to rule out browser-specific behavior conflicts.  
  • Verify dropdown behavior settings and inspect for conflicts inside the Designer.  
  • Use Chrome DevTools to detect hidden styles or CSS conflicts.  
  • Test both in Webflow Preview and on the live site to compare behaviors.  
  • Clear Chrome cache or use Incognito Mode to bypass cached styling issues.

Your dropdown menu not expanding in Chrome usually results from browser-specific conflicts, often caused by custom styles, interactions, or overflow settings.

​

1. Check for Hidden or Overflow Issues

  • Select the Navbar or parent container of the dropdown.
  • In the Style panel, verify that Overflow is not set to Hidden. This can prevent the dropdown from being visible when it tries to expand.
  • Set Overflow: Visible on containers/wrappers that surround the dropdown.

​

2. Validate Z-Index and Positioning

  • Make sure the Dropdown List has a higher z-index than surrounding elements, especially those that might overlap it.
  • Apply Position: Relative to the dropdown wrapper and z-index (e.g., 1000) to the dropdown list if needed.

​

3. Disable Custom Interactions for Testing

  • Go to the Interactions panel and check if any custom interactions are applied to the dropdown toggle or list.
  • Disable them temporarily to see if the dropdown expands in Chrome.
  • Some interactions behave differently across browsers — especially those managing height or display properties.

​

4. Double-Check Dropdown Settings

  • In the Element Settings panel, confirm that the dropdown is set to open on click or hover, as intended.
  • Toggle the dropdown open in the Designer and inspect if the Dropdown List is inside a conflicting element that may be causing clipping.

​

5. Inspect with Chrome DevTools

  • Use Chrome DevTools (F12) to inspect the dropdown.
  • Look for computed styles like display: none, opacity: 0, or incorrectly applied transform/translate values.
  • Confirm that no conflicting CSS is loaded in Chrome via browser extensions or custom embeds.

​

6. Test with Webflow’s Preview vs Live Site

  • Sometimes issues only appear after publishing. Preview your project in Webflow and then publish it.
  • Check both the Preview link and the live URL in Chrome to compare behavior.

​

7. Clear Cache or Try Incognito Mode

  • Chrome may be loading a cached version. Clear your browser cache or check in Incognito Mode to rule this out.

​

Summary

The dropdown menu not expanding in Chrome is usually caused by overflow restrictions, z-index stacking, or custom interactions. Adjusting these settings and inspecting the dropdown with Chrome DevTools will help identify and fix the issue.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I add ad-hoc HTML tables in my CMS Richtext content in Webflow without the need for clients to edit HTML markup directly?
Can Webflow achieve a dropping and lifting menu items animation similar to what is used on ___? What are the main steps to achieve this effect, and can it be done without JavaScript?
How can I hide a form in Webflow on submit and display a confirmation div without interfering with the standard Webflow form JavaScript and without knowing JavaScript?
How can I use getCurrentLang() in Webflow to determine the language code for a multi-language website with Weglot translation integration?
How can I achieve the highlighted text effect on my website using Webflow?
How can I remove the template logo icon that is automatically displayed when I paste my Webflow website link in a mobile phone text?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I stretch a body background image in Webflow to fill the entire screen without preserving its aspect ratio?
Can combo classes be applied to CMS collections or is there another solution to applying the card stack effect in Webflow?
What action should I assign to a form in Webflow's custom code component to make it submit and function like a regular Webflow form?
Does Webflow have an integration or feature available for website commenting?
Why does the Webflow hosting platform experience downtime and performance issues, and why does their official status page not accurately reflect these issues? Is it normal for a major hosting provider like Webflow to have these problems?
How can a CMS collection be linked to a dropdown menu in Webflow?
What is causing unexpected margin and padding on multiple sections in my Webflow site?
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?