Managing Multiple Navbar Designs with the Relume Librar...

At a glance

A community member asks about managing multiple navbar designs in the Relume library, specifically how to handle different color schemes and styles for specific pages without affecting the primary navbar style.

Several solutions were discussed in the comments. One approach suggested using component properties and Webflow variables to manage color changes, though it was noted that component properties are limited to visibility and content modifications. Another suggestion was to unlink the navbar from the master component and use combo classes, though this was considered not ideal.

The most successful solution, confirmed by the original poster, involved using custom CSS. A detailed example was provided using a navbar_wrapper structure with an is-alternate class to manage different styles. The CSS approach allows for easier targeting of child elements and more flexible style management compared to native Webflow solutions.

The original poster confirmed that the custom CSS solution worked effectively for implementing different navbar styles across pages.

FFalko Piguet

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

9 comments

JJohn Iseghohi

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

FFalko Piguet

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?

JJohn Iseghohi

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

FFalko Piguet

Yes but from my knowledge, component properties are limited to: show/hide elements, and modifying content from instance to instance.

FFalko Piguet

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

JJohn Iseghohi

Yes definitely, unlink and do combo classes

MMatt Johnson

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.

Hope that spins up some ideas for you Falko! Welcome to the Relume community, glad to have you here! 🙌

FFalko Piguet

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!

FFalko Piguet

hey worked like a charm, definitely better and easier to use on new pages. Thanks for the tip!

Add a reply

Community forum for knowledge and support

Managing Multiple Navbar Designs with the Relume Library