Streaming live at 10am (PST)

Flexbox width doesn't work correctly after interaction

Hey Webflow Community,

I’m currently working on a animated “navigation overlay”, in which I want to use flexbox.

The problem here is, that flexbox doesn’t seem to work properly (e.g the width of the columns inside the navigation overlay doesn’t change if you resize the browser window) if the navigation was opened once.

How to reproduce the problem:

  1. Go to the published site. Click on the hamburger menu on the top right side. The navigation will drop down and you’ll see 3 columns with headings and some text links inside.
  2. Now resize the browser window. Normally those 3 columns should resize themselves and get smaller in width, but they stay the same size and resulting in a horizontal scrollbar.
  3. Keep your browser window at the smaller width and reload the site. Now open the navigation again and you’ll see how it SHOULD look if resized.

Strange enough, the problem doesn’t occur in the Designer. Only in the preview / published site.

But yea, in the designer the animation also isn’t hidden. It seems like it has something to do bc there is an interaction / animation happening.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Published site: LINK