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 Navbar position to fixed and apply a maroon background color.
  • Ensure Navbar has a higher z-index and adjust visibility settings for elements.
  • Review interactions to prevent icons from disappearing.

To address the issue of the logo and menu icon moving/disappearing when scrolling in Webflow, follow these steps to keep the menu icon fixed with a maroon background.

​

1. Make Navbar Elements Fixed

  • Select your Navbar element in the Webflow Designer.
  • In the Styles panel, adjust the position setting to Fixed. This will ensure that the navbar, along with the logo and menu icon, stays in place while scrolling.

​

2. Apply Background Color

  • Within the Styles panel, set the background color to maroon for your fixed Navbar. You can input the hexadecimal code or use the color picker to select maroon.

​

3. Adjust Z-Index

  • Ensure the navbar has a higher z-index than other elements. This ensures that it stays visible on top of other page content when set to fixed.

​

4. Ensure Visibility of Elements

  • Check that the reduced logo and menu icon have no issues of opacity or display setting changes on scroll. Set them to be visible as you require.

​

5. Review Interactions

  • Inspect any interactions applied to the Navbar and its elements, such as scroll-based animations. Ensure they aren't unintentionally causing the icons to disappear.

​

Summary

To fix the issue of the navbar elements moving and disappearing, set the position of the Navbar to fixed in Webflow and apply a maroon background color. Ensure that interactions do not interfere with visibility, and set a high enough z-index to keep the Navbar on top. This approach will create a consistent and stable menu icon display while scrolling.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I send a confirmation email and add a new member's email address to Mailchimp in Webflow if the membership form is not a form?
What is the cleanest method in Webflow to invoke a GET API on button click without the ability to add custom code or an API call in the button settings?
How can I display event start and end dates in the local time of my website visitors using Webflow?
What could be causing the spacing issue below images in the Webflow CMS collection display? The spacing only appears on a few images, not all of them, and I'm unable to determine the source of this issue. I've noticed a similar problem on another page with a similar design that also uses CMS collections. Any insights would be appreciated.
How can I import my HTML and CSS custom code into Webflow?
Can Webflow allow the use of a URL as an image? I imported an image URL as text via a CSV but couldn't figure out how to display it as an image. Is there a solution for this?
Which CMS is the easiest to use and best to integrate with Webflow, allowing clients to easily make changes to text, images, and add blog posts without any loss in HTML/CSS/JS after exporting the design from Webflow?
How can I ensure that the checkbox value in my Webflow project is sent as a boolean in the JSON for Mailchimp integration?
Can I salvage a Webflow site that was not built in the base breakpoint or must I rebuild it from scratch in the main base breakpoint?
How can I change the video in a video player using a button or thumbnail in Webflow?
How can I preview a Webflow site in the actual browser like Chrome instead of the designer preview?
How can I resolve an issue with an interaction overriding the hover state in Webflow? The desired outcome is for the text color to change to purple when hovering over a title, and for the element to become 'active' and trigger certain changes when clicked.
How can I hide the Coda badges displayed when an iframe loads from `<a class="lightbox"` using Webflow?
What are the differences between using columns and grids in Webflow for arranging content in two columns?
Can Webflow be used to develop a website that provides clinic bookings, integrates with Zapier and Google Calendar, includes customer and admin dashboards, and allows users to update the CMS? Any tips?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?