To achieve the effect of inverting colors on your fixed menu in Webflow when scrolling over sections and their images, you can follow these steps:
1. Create a Class for the fixed menu:
- Select the menu element and add a class to it using the Class field in the right-hand sidebar. For this example, let's call it "fixed-menu".
2. Add a custom code embed component:
- Drag and drop a custom code embed component onto your page, and place it in the same position as your fixed menu. You can find the custom code embed component under the Symbols tab in the Add panel.
- Click on the custom code embed component and open its settings in the right-hand sidebar.
3. Write custom JavaScript code:
- In the Heading field of the custom code embed settings, add a heading for better organization.
- In the Body field, click on the "</> Select element" button and select the section or image element you want the menu to interact with.
- Once the element is selected, you can add custom JavaScript code to modify the menu's class. Here's an example code snippet:
```javascript
```
4. Add CSS for the inverted colors:
- Go to the Styles tab in the right-hand sidebar.
- Scroll down to the Custom Code section at the bottom.
- Click on the "+" button to add a new rule.
- Add the following CSS code to style the inverted menu colors:
```css
.invert-colors {
color: white; // Customize the inverted menu color
background-color: black; // Customize the inverted menu background color
/* Add any other styles you want to apply when colors are inverted */
}
```
Remember to replace '.section-with-image' with the actual class name or selector for the section or image element you want to interact with.
By following these steps, your fixed menu should now invert colors when scrolling over the specified sections or images in Webflow.