How can I fix the issue in Webflow where the logo and menu icon move when scrolling and the reduced logo and menu icon disappear when scrolling the second menu? I'm considering keeping the menu icon fixed and applying a maroon background. Any suggestions?

It sounds like you're dealing with unintended movement of the logo and menu icon during scrolling, as well as visibility issues with a second menu. You can use a combination of Webflow’s fixed positioning and interaction settings to stabilize these elements.

1. Set the Menu Icon as Fixed

• Select the menu icon in Webflow Designer.
• In the Style Panel, set the Position property to Fixed (top-right or preferred location).
• Adjust Z-index (e.g., 9999) if needed to keep it above other elements.
• Ensure Width and Height are appropriate so the icon doesn’t shift on different screen sizes.

2. Ensure the Logo Remains Fixed or Sticky

• If you want it always visible: Set the logo’s Position to Fixed similar to the menu icon.
• If you want it visible only while scrolling: Use Sticky positioning instead (under Position settings).
• Adjust Z-index (higher than other elements).

3. Apply a Maroon Background on Scroll

• Select the Navigation Bar element.
• Under Interactions & Animations, create a new Page Scroll animation.
• Add a Background Color change (set it to maroon) when the page is scrolled down a certain percentage.
• Optionally, apply a fade-in effect to ensure smooth appearance when scrolling down.

4. Fix the Second Menu’s Disappearance Issue

• Check if the second menu is accidentally set to Display: None on scroll.
• If using animations, ensure Opacity is set to 100% when visible.
• Verify that no hide/show interactions are conflicting when scrolling.

Summary

To resolve your issue, fix the menu icon’s position, ensure the logo remains visible, apply a maroon background on scroll, and check the second menu settings. Adjust Z-index and interactions for proper stacking and visibility.