Hello!
I’m experiencing an issue where my hamburger menu interaction does not reset properly when resizing to larger breakpoints (1440px and above).
The hamburger menu interaction switches between the hamburger icon and an “X” icon. On first click of the interaction, when menu opens, “hamburger menu image” disappears (display :none) and “X image” appears (display: block) . On second click the action reverses.
The Webflow interaction for the hamburger menu seems to override both CSS and JavaScript, making it persist at larger breakpoints.
The issue occurs because the only trigger option in Webflow is “Desktop and above,” but I need separate behaviors for Desktop (1439px and below) and Above Desktop (1440px and above).
Expected Behavior:
The hamburger menu should open/close normally using interactions on desktop breakpoints (1439px and below).
Disappear entirely (display: none) at 1440px and above.
Actual Behavior:
When the menu is opened/closed using interactions at a smaller breakpoint (e.g., 1024px) and then the viewport is resized to 1440px or above:
The hamburger menu remains visible and functional.
This happens even though the breakpoint settings in the Designer specify display: none for the hamburger menu at 1440px and above.
What I’ve Tried:
Setting CSS display: none for the hamburger menu at larger breakpoints.
Adding custom JavaScript to reset the menu state (e.g., removing Webflow’s w–open class and hiding the menu) when resizing to 1440px and above.
Ensuring the Designer settings are correct for the hamburger menu at each breakpoint.
How can stop the hamburger menu interaction from working entirely at 1440px and above?
Is it even possible to do so?
Here is my site Read-Only with just the menu: Webflow - BI's Stellar Site