Fixing Webflow Navbar Issues with Relume Components: A Guide

I am coming up to speed with Webflow after many years absence from doing front end development and after many hours I have fixed a problem with a Relume component. Below is the fix that may be of help to some one. I cloned a free Navbar that I think was built by Jordan Hughes of Untitled. The preview is at https://www.relume.io/preview?cid=navbars/navbar1_component The problem was that the hamburger did not show and neither did the X for closing up the menu drop down. If I clicked in the right places it functioned but that is not a good UX. The preview version worked fine so I used Google's Inspect to look at both the closed version and the preview version and they are quite different. Then using Inspect I turned on and off various CSS settings in the preview version and determined that the back ground colours of menu-icon1_line-top, menu-icon1_line-middle and menu-icon1_line-bottom were set as transparent. Changing them to a dark colour did not fix the problem. I then noticed that there was a SVG in the Background settings (background_image.svg). Clicking on the Hide button to the right of the file name solved the problem. It was so nice to be able to make my first ever Slack post a hopefully helpful one. 🙂 (I have never worked for a company where my role required Slack.) Thank you for the services, Relume.