Help with Styling Category Buttons in Webflow CMS

Design help General
1

I need help with styling our category buttons in Webflow CMS so that the background color (for example, purple) changes when you’re on the respective category page.

I’ve contacted Webflow support, and they don’t have a native solution that allows dynamic styling of buttons based on specific categories. Do you have any tips or solutions for this?

Here is my site Read-Only: Webflow - Sello site 2.0

1 Like
2

Hi there,

To style buttons based on active category pages in Webflow, you can use the combination of states and custom attributes. Here’s what you can do:

You can set up a custom attribute on your category buttons and use Webflow’s built-in states to change their appearance. When a category is active, apply different background colors, borders, or other visual indicators through the Designer’s style panel. You can also use classes with conditional visibility to show different button states based on the current page or category.

For more dynamic control, consider using custom code to add an “active” class to buttons that match the current category. This can be achieved through Webflow’s custom code capabilities in the page settings.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

Thank you for your reply! How do you do this? When I emailed Webflow I got this as a answer: Webflow doesn’t have a native solution that allows you to set up dynamic style buttons based on specific category. However, many of our customers utilize third-party integrations to set up similar behaviors on their sites.

Could you please explain step by step on the text you wrote on how to do this?

4

Do you mean a static color, set for each category uniquely, and only when it’s the current category?

All you’d need to do is;

  • add a color field to your collection, and populate it
  • on the link itself, bind the background color on the Settings panel to your CMS field.

You’ll see that every category button is now colored whether it’s selected or not. Webflow is doing this by setting the style attribute.

Now, you want to override that styling when it’s not the current item.
You can do that with a small embed-

<style>
.link-27:not(.w--current) {
  background-color: white !important; 
}
</style>

I’d probably change it so that your category link class has a clearer class name, maybe category-button, especially when you’re writing custom styles like this.

5

Thank you so much for this!