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?
TL;DR
- Set the menu icon to Fixed position with a high z-index and apply a maroon background directly to the element.
- Use Fixed or Sticky positioning for the logo based on scroll behavior and toggle between original and reduced logo/menu using scroll-triggered visibility interactions.
You're experiencing a positioning and visibility issue with your logo and menu icon when scrolling between menus in Webflow. Here's how to fix their movement and visibility, and apply a maroon background to the fixed menu icon.
1. Set the Menu Icon to Fixed Position
- Select the menu icon element in the Navigator.
- In the Style panel, set the Position to Fixed.
- Choose the top-right corner (or your preferred corner) using the position presets.
- Set a high z-index (e.g., 9999) to ensure it stays above all other content.
2. Set Logo to Fixed or Sticky (Depending on Design)
- If the logo should stay in place while scrolling, select the logo and set Position to Fixed with your preferred alignment.
- If it should scroll but then hide/swop with a smaller version, use Sticky positioning instead and control its visibility using interactions or scroll animations.
3. Create Scroll-Based Visibility for Reduced Logo/Menu
If you want a reduced version of the logo and menu to appear after scrolling:
- Add a duplicate set of the logo/menu (e.g., a smaller size) in your Nav or Header.
- Set that smaller version to Hidden by default (Display: None).
- Use a Scroll Into View interaction on a trigger element (e.g., when scrolling past the first menu) to:
- Hide the original logo/menu (Display: None or Opacity 0).
- Show the reduced version (Display: Flex or Opacity 100%).
4. Apply a Maroon Background to the Fixed Menu Icon
- Select the menu icon.
- Set Background color to the maroon value you want (e.g., #800000).
- Be sure to set background on the element directly, not on a hover state unless needed.
5. Ensure Consistent Z-Index and Responsiveness
- Keep all fixed/sticky elements above the content using a consistent high z-index.
- On smaller screens, verify menu icon placement and visibility in Webflow’s responsive breakpoints (Tablet, Mobile).
Summary
Set the menu icon to Fixed position, apply a maroon background, and manage multiple logo/menu states using scroll-triggered interactions. This approach keeps the icon visible and prevents layout shifts as users scroll through different menu states.