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

Can I use Webflow to design my site while still using iPage for my domain registration?

How can I move the slider arrows in Webflow to a different position like in the attached picture?

How can I overlay text on an image within a section in Webflow?

How can I create a sticky footer in Webflow without having to use excessively large top margins?

How can I make my background videos in Webflow scale responsively while maintaining their 16:9 ratio and original section margins?

What are the required records to connect a subdomain to Webflow if the main domain is not meant to be connected?

How can I integrate the form on my Webflow page to a Sendgrid account for email capture, considering the limitations of the Sendgrid widget and the lack of necessary functions in Zapier?

How can I create a customizable slider with a custom slider navigation, allowing users to switch slides by hovering over the buttons in Webflow?

Can I install [tool or integration] on my website hosted with Webflow CMS Plan?

How can I enforce numeric input in form input fields in Webflow?

How can I make the INPUT FIELD on this Webflow template page active and process emails with "GO" as the send button for a Newsletter/Updates SIGN UP?

Are there any instances of Webflow users experiencing a bug where custom animations are not displaying correctly on a webpage, resulting in certain elements having an opacity of 0?

Is there a more efficient method in Webflow for adding keywords and other Meta tags to my header without duplication? Thank you for any assistance. Mike

How can I fix the issue of text overlapping in a specific section of my website when the browser width is not wide enough in Webflow?

How can I create a slider on mobile where cards turn into slides, using Webflow?

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?