Parent class affect child properties

Hi there, I want to change a child element property depending on a parent classname. I want to make a menu that would have 2 styles, one on a light background, the other one on a dark background.
In this menu there is an image logo, in fact 2 image logos, a light logo for the dark menu, and a dark logo for the light menu… See the point. How can I set those logo to display or hide depending on their parent menu classname “light” or “dark”.

Writing this into pure css would take 2 straightforward rules like this:

.mainMenu .logo {
    display: flex;
}
.mainMenu.dark .logo.dark, .mainMenu.light .logo.light {
    display: none;
}

But I’m not sure how to do the equivalent in the Webflow Builder?
Thank you for reading!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Welcome to the community @JBA1 :wave:

Do you happen to have an active project available with a read-only link so I can take a peek? It’s always better to give advice on potential solutions when there’s something tangible to reference.

That said, some general feedback is that there are many situations where custom code is a bit more straightforward than working with the native functionality of the Designer. While Webflow natively does a great job empowering those who know traditional HTML/CSS, almost every one of my projects on the platform utilizes some form of custom CSS.

Hi @mikeyevin thanks for your welcome!
There is not much to see on this project as I’m just starting, but you might be right, custom CSS is maybe the best solution, as a developer that’s quite easier, however I would like to stay as close as possible to the webflow builder in order to let my non-dev teammates make some changes from time to time :slight_smile:

When you’re wanting CSS to apply in more complex selector cases, like within or :has() or :not(), you’ll need to step into custom CSS.

My best advice is to use Webflow’s element-level classes and styling as much as possible, and then add your custom adjustments in an HTML Embed. Using an HTML Embed means your effect will appear directly in the Designer.

In your case, I’d put it in the Nav symbol since it affects the nav.

1 Like

Thanks for the HTML Embed tip, I will dig out there, it will be great if we can see changes in the designer!

It just happens that specific feature was having some issues yesterday but hopefully resolved today. The Webflow team is working on it.