Community forum for knowledge and support

Updated 10 months ago

Webflow Responsiveness Issues with Relume Components

At a glance

The community member is experiencing issues with the mobile responsiveness of Relume components in Webflow. The navbar hamburger menu icon is invisible on the live site, and the card borders in layout 416 are not showing up as expected. Other community members have reported similar issues.

The issue was resolved by resetting the background color variables for the menu icon lines and applying a variable. The community member had renamed some of the base brand color variables, which caused the issue. Restoring the variables fixed the problem.

The community member also assumes the same variable issue may be causing the card border problem in layout 416.

Hi team, got a few issues with Relume components in Webflow for mobile responsiveness. In the webflow editor, I can see my navbar hamburger menu has an icon, but when accessing the site through the domain on my phone it's invisible? I'm using navbar 5.

Also, with layout 416, the cards border is there, but on the actual site it's not.

Can someone please help me out? I can't figure out why these issues are happening. Read only link

M
M
D
11 comments

I’m seeing this issue as well. The menu icon also doesn’t look right - it’s not showing one of the lines.

I’m using the Relume Style Guide, so that shouldn’t be the issue. Seems like others have had this problem recently as well.

I was actually just able to fix this. Seems like the issue was with variables. The background color for each menu icon line was empty, so I reset it and applied a variable.

I know you said you resolved it but would you mind sharing a read only link?

where did you copy navbar 5 component from? Site Builder, Library, Extension or Webflow app?

from the Library

ah it appears its the same issue that Maria pointed out - you are missing the variables. In this case its because you've renamed the variables I believe. You'll need to reset the background color and set one of your variables.

This was exactly the issue I discovered. It was fixed once I reset and applied a variable. I’ve seen “missing” variables (e.g., an empty color) in other components previously and was confused by it, but now it makes sense.

okay so you had renamed some of the base brand color variables you are saying yeah? If so, yeah that may cause an issue - but only if you are renaming the black/white colors which is what we use - we don't define or use any other colors (intentionally).

Yes, I think something like that happened. I think I moved the white and black to a different group. They are now in ‘Base Color - Neutral’ instead of ‘Base Color - Brand’. Or, I just deleted them altogether before adding them back. Don’t remember exactly as that was last week, but glad I figured out the problem

Ahhh okay makes sense. Thanks for your help guys, much appreciated. And I assume it'd be the same issue for the layout 416 card borders?

Add a reply
Sign up and join the conversation on Slack