Streaming live at 10am (PST)

HELP ASAP: close button on my hamburger nav keeps disappearing when i scroll

I have 2 burgers. One that is sticky and one that appears when scrolling. The one that appears when scrolling opens with no problem, but once i open it, the close icon disappears after i scroll either up or down. Im figuring that this is due to the color of the div blocks changing back to white (the background of the menu) but im not sure how to make them black after click since ive already done that, and im not sure how to animate that on scroll.

Also if you could help me with a second issue, ill post about it as well. I have a pop up contact form that appears after opening the menu and after clicking “contact us” however once i exit out of the contact menu, i cannot reopen it and trying to reopen it causes the menu to freeze and lock up in place.


Here is my public share link: [Webflow - Top Pro Motorsports]

Hmmm this is an interesting interaction but I think the issue stems from trying to control the color of the hamburger menu on scroll while also changing it when you open the menu. Since the page scroll trigger is happening over the course of the whole page, it’s overriding the color change that happens on click. Normally this isn’t a huge issue, however your menu icon and X icon are opposite colors based on the scroll position.

The easiest solution here is to omit the transforming hamburger icon and instead use a separate X icon SVG that pulls its fill color from the font color within that sidebar menu (ex: fill=“currentColor” on the SVG itself). This way it will respond to the change in color that happens as users scroll down the page rather than trying to fight against the same color transition that’s happening on the hamburger menu.

It may also be a good idea to contain the sidebar icon within the Navigation Symbol as well to keep those two elements together rather than being split apart in different parts of the DOM. I don’t think it’s the case here, but it may lead to issues with z-index sorting down the road depending on how the project evolves—not to mention it makes adding all of the necessary navigation elements easier as you can just include that single Symbol.

In terms of the second question, I’ll take a peek and respond in the other thread to keep things organized.