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?

To fix the issue where the logo and menu icon move when scrolling and the reduced logo and menu icon disappear when scrolling the second menu in Webflow, you can follow these steps:

1. First, let's make the menu icon fixed. Select the menu icon element and go to the Styles panel. Under the Position section, choose "Fixed" from the dropdown menu. This will ensure that the menu icon stays in a fixed position even when scrolling.

2. Apply a maroon background to the menu icon. Select the menu icon element and go to the Background section in the Styles panel. Choose the desired maroon color from the color picker or enter the specific color code. Adjust other properties like opacity or gradient if needed.

3. Now, let's address the disappearing reduced logo and menu icon. It's likely that this is happening because the second menu has a higher z-index than the reduced logo and menu icon. To fix this, select the second menu element, go to the Position section, and increase the z-index value to a higher number. This will ensure that the second menu appears above the reduced logo and menu icon.

4. To make the reduced logo and menu icon stay visible even when scrolling the second menu, we'll need to use interactions. Select the reduced logo element and go to the Interactions panel. Create a new interaction, and under the Scroll trigger, choose the option that triggers the interaction when the second menu starts to scroll into view.

5. In the interaction, set the initial state of the reduced logo and menu icon to be visible. Then, create a new animation where you adjust the opacity property, making it 0% to hide the reduced logo and menu icon when the second menu is scrolled into view.

By following these steps, you should be able to fix the issue and achieve the desired behavior in Webflow. Remember to preview and test your changes across different devices and screen sizes to ensure a consistent experience.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

What is the best way to create this effect using a normal img element in Webflow instead of setting the image as a background and adding an overlay?

Is it possible to customize the style of bullets in a list using Webflow's UI?

Has anyone successfully implemented Locomotive scroll on a Webflow project and encountered issues with its compatibility on mobile devices?

How can I integrate Webflow and Salesforce, including styling, success message, and hidden form fields, while keeping the overall functionality of a standard Webflow form? Any tips on the best way to proceed?

How can I make the lottie animation embeds in Webflow full screen and responsive like this example codepen.io?

Can I move my Webflow project from a subdomain to a subfolder within a larger project?

What happens to a site on Webflow if I purchase a Site Plan for a specific number of months, publish it to a custom domain, and then let the plan expire? Will the site still exist on Webflow even if I can't edit it and it remains locked in my dashboard?

How can I create a link like the one in this Webflow template, specifically around the "rejoins notre communauté"?

What is the process for integrating Algolia instant search into a Webflow website?

How can I combine the animated JS number counter with scroll animation on Webflow and ensure it only animates when the section is in view?

Is it possible to use the "video background" div block with CMS items in Webflow and upload videos to CMS items for dynamic calling in a template?

How can I edit specific classes that I have created in Webflow? I am unable to locate the option box mentioned in an old response from 2014, and I do not see it to the right of the classes text field. The only dropdowns I see are for renaming or duplicating a class and selecting pseudo-classes. Here are screenshots for reference: [Include screenshots here]

How can I filter a CMS collection list by the current user ID on my Webflow blog website using Finsweet attributes and webhooks to get user information and IDs into a dedicated CMS collection?

Can I adjust the indent of a bullet list in a rich text element in Webflow?

How can I remove design elements like circles and lines from the mobile version of my Webflow site without affecting the website and tablet versions?

Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?

Can the Webflow YouTube component recognize channel IDs instead of video IDs for embedding a Live Stream?

How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?

How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?

How can I fix the issue with the scroll not being smooth on my mobile device (iPhone + Safari) in Webflow?

How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?

How can I add date filtering to my current list of filters in Webflow using Finsweet CMS Filtering?

How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?

How can I whitelist the IP or user agent of a third-party vendor to crawl my Webflow site for legal compliance archiving purposes?

How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?

How can I dynamically redirect to a CMS created after form submission in Webflow?

How can I make the menu close when a link is clicked in Webflow?

How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?

How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?

How can I add user input to the end of the redirect URL in Webflow?