Made in Webflow

Override Symbol Styles [Hack]

site profile thumbnail


Webflow lets us override symbol content, but we're stuck with styling... Here is a workaround I've been using until we can officially override symbol styling. This hack is handy if you want to toggle between a few "modes" or "themes" without having to maintain multiple symbols. How it works: It involves linking a hidden text block to an override field to specify a combo class. Custom code is used to apply the defined combo class to the symbol relative to the trigger. You're able to override styles for the trigger parent, sibling or all children elements. This hack works for any number of symbols on a page. Current limitations: Only works on published site Tiny flicker until javascript loads
Feeling inspired?If this Made In Webflow site sparked some inspo, why not get started on a project of your own? Clone a site, purchase a template or start building from scratch.

We miss comments too!

Right now, Made in Webflow doesn't offer all of the same functionality that Showcase did, like the ability to leave comments. But don't worry: We're working to bring comments back as soon as possible!

As always, we'd love to hear your feedback! Click the link below to take a short survey about Made in Webflow.


More by Dhruv Sachdev

See profile
View details
20 Line Hover Animations