Fixing a Problem with a Relume Component

At a glance

A community member was working on a Webflow project and encountered an issue with a Relume component, specifically a Navbar. The issue was that the hamburger menu and the X to close the menu were not visible, even though the functionality was working. The community member investigated the issue by comparing the preview version and the cloned version, and found that the background colors of certain elements were set to transparent. Changing the colors did not fix the issue. The community member then noticed an SVG file in the Background settings and hid it, which solved the problem.

In the comments, another community member asked if this was the Navbar 1 component from the Relume Library, and the response was that it was not from the Relume Library but rather from the Untitled UI component library. There was also a discussion about whether the community member hid the SVG in the Webflow settings or in the Inspector, and the response was that they hid it in the Inspector but to save the changes, they would need to do so in the Webflow settings.

Useful resources

DDavid Haysom

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.

4 comments

EEmily Marais

Saving this for later in case I need it - thanks David!

To be clear, this isn't Navbar 1 from the Relume Library?

EEmily Marais

Also, it wasn't clear to me... did you hide the SVG in Webflow settings or in the Inspector?

MMatt Johnson

Thanks !

I dont believe this was in our library - this would be in the Untitled UI component library which is maintained separately. And I believe he hid thesvg in inspector to troubleshoot but in order to save those changes you would need to do so in webflow settings.

Likely something worth looking into still. Will pass to the team!

DDavid Haysom

Yes it is in the Untitled UI component library

Add a reply

Community forum for knowledge and support

Fixing a Problem with a Relume Component