Webflow sync, pageviews & more.
NEW

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 the dropdown has a high z-index and no parent elements with overflow: hidden.
  • Use Chrome DevTools to inspect for hidden styles and test by manually changing display.
  • Disable custom code and interactions to check for conflicts with dropdown behavior.
  • Re-add the dropdown if corrupted and test in a clean section to isolate issues.

Your Webflow dropdown menu not expanding in Chrome is likely due to conflicting styles, z-index issues, or JavaScript interactions that behave differently in Chrome. Here's how to identify and fix it.

1. Check z-index Settings

  • Ensure the dropdown menu has a higher z-index than surrounding elements so it appears on top.
  • In the Webflow Designer, select the Dropdown List element, go to the Style panel, and set a z-index (e.g., 9999).
  • Also make sure no parent elements have overflow: hidden, which can cut off the dropdown.

2. Inspect Element in Chrome DevTools

  • Right-click the dropdown in Chrome and choose Inspect to open DevTools.
  • Check the computed styles to see if anything is hiding the menu (e.g., display: none, opacity: 0, or clipped due to overflow settings).
  • Confirm that the dropdown list becomes visible when you manually add display: block in DevTools.

3. Review Custom Code or Interactions

  • Disable all custom JavaScript and test again. A script may be interfering with the dropdown.
  • In Webflow Designer, go to Page Settings → Custom Code, and ensure there are no event handlers overriding default dropdown behavior.
  • Also, check under Interactions > Page interactions and Element interactions for any custom animations applied to the dropdown elements.

4. Check for Webflow Component Corruption

  • Delete the dropdown element and re-add a fresh Dropdown component from the Add panel.
  • Sometimes dropdowns can get corrupted if styles are heavily overridden.

5. Test With Clean Styles

  • Create a new page or section with only a dropdown and no custom CSS or interactions.
  • If it works there, the issue likely stems from other styles or scripts on the original page.

Summary

To fix a Webflow dropdown that works in Firefox/Edge but not Chrome, ensure the element has a high z-index, no parent overflow restrictions, and is not affected by custom code or interactions. Re-test with simplified styles to isolate the issue.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I make the pagination in Swiper.js work in my Webflow project? I have tried both the progress bar pagination and the bullet style pagination, but neither of them is functioning. Can someone please help me identify where I went wrong?
What code can I use to deactivate the zoom in on my phone when I focus on the form (text input) elements in Webflow?
Is it possible to have multiple Add to Cart buttons with quantities for each product card on a Webflow eCommerce page without creating individual product pages for each item?
Can someone help me if I receive an error "cannot use this promo code for this billing frequency" while trying to buy a Webflow plan using a student discount coupon code?
Is there a way to automate the insertion of a canonical URL tag in Webflow?
What are some free alternatives to using Google Sheets and Google Data Studio to create a responsive, filterable, and sortable dynamic table on a simple website built with Webflow?
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 ensure that line breaks in the description box of a form in Webflow are properly displayed in the rich text field of the CMS when creating a new item through Integromat?
How can I enable scrolling on my Webflow site when using an I frame as the cover image, specifically for Safari on iPad?
How can I adjust the spacing of the arrow in Webflow so that it is not positioned too far from the corner of the field?
How can I target checkboxes instead of a div using custom embed code in Dave's Webflow project about multi-field reference checkboxes?
How can I reset the tablet and phone versions of my website in Webflow to match the PC version and remove any unknown padding?
How to solve the "406 not acceptable" error when trying to open Webflow?
Can CSS properties be set on the HTML element in Webflow to make the page height stretch to fit the screen?
Is there a Webflow tutorial or forum post discussing how to create a parallax effect where graphic elements on the site scroll at different speeds?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I close a dropdown in Webflow when clicking on a link?
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 implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
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?