Hey everyone,
Quick question, how do you manage multiple navbar design with the relume library? Say you have a primary navbar style, but on 1 or 2 pages, you have to change it because the style doesn't work (usually colors).
Background color and position is pretty easy with the addition of a wrapper, but what's your process for link text color and button style? Do you detach the navbar from component on a specific page? Do you duplicate the navbar component and create a new variation with different classes? Thanks for your feedback
I think this is where component property features coming in handy.
You can set the properties of the text color and assign a color variable you can change on other instances without it affecting the master component
Hey John, thanks for the feedback! So you mean the new webflow variable? Haven't played much with that yet.
How would it look like? In the master component, add a variable say, for text color within the nav_link class, and then create a new instance of the component and change the variable?
Yes, I can create a loom video to explain better if it’s not super urgent for you.
Have you used component properties before? Like set visibility for different parts of a master component
Yes but from my knowledge, component properties are limited to: show/hide elements, and modifying content from instance to instance.
an easy option would just be to unlink the navbar from the master component on the main page, and create alternative classes for nav_link colors and button, but that seems wrong
one thing you could try along with what John has mentioned - I don’t know to what degree you’d be changing the colors but for a simple illustration lets say the default is that the background color of the navbar is white and the logo and links within it are black. Let’s say there are two buttons in the navbar and 4 links. The two buttons, one is a black outline button and one is a black filled button.
Let’s say for the second style, everything is inverted. And we could just simply call this is-alternate
Let’s say that you have a div structure for your navbar like this:navbar_wrapper
- this wrapper is wrapping the navbar symbol/component (green element) that you would create in Webflow to make it global across the project) I sometimes apply position sticky or background colors to this div because you can easily change these styles leveraging the class and you can easily add a combo class if you want to do something unique here.
navbar
- this is a div wrapping the actual navbar element. This is the div that you would turn into a component. It has zero styles on it.
navbar_component
navbar_container
navbar_wrapper
is where I am going to add this is-alternate
combo class. Now this is where things get a little tricky, but its a bit easier to manage it via custom code than within Webflow natively, and I’m almost certain that there are smarter people within this community who may have a different or better solution.
<style> .navbar_wrapper.is-alternate { background: #000; /* Black background */ color: #FFF; /* White text */ } /* hide the black logo */ .navbar_wrapper.is-alternate .logo { display: none; } /* Show the white logo */ .navbar_wrapper.is-alternate .logo.is-alternate { display: block; } /* change button colors */ .navbar_wrapper.is-alternate .button { border-color: #FFF; background: #FFF; color: #000; } </style>This is a really crude example of code, if you are not at all familiar with CSS, I could probably write you better more specific CSS code to help here but just wanted to illustrate that its easier to target children via custom CSS code than it is via Webflow - I actually don't think its possible to target children in the same way - you'd have to use component properties to show/hide certain things to make it happen.
hey Matt,
Thanks for the feedback, really appreciate it. I haven't thought about custom code as an option for this, really good idea. I'll see what I can come up with. Thanks!
hey worked like a charm, definitely better and easier to use on new pages. Thanks for the tip!