[QUESTION] - Multiple Classes/Drop Down Menu/Interaction Move Up

Click the link for the answer -> 1 = SOLVED - [QUESTION] - Multiple Classes/Drop Down Menu/Interaction Move Up

Click the link for the answer -> 2 = SOLVED - [QUESTION] - Multiple Classes/Drop Down Menu/Interaction Move Up

3 = SOLVED - Had to add 1 more Transform Interaction that moves the element back to its original position when I hover out.

1. How do I know which classes are selected when I have 2 or more classes on one element?
Currently I am not able to see which classes are selected if I want to target the first child of a navigator or dropdown menu.

2. How can I remove the background from the Dropdown Menu Buttons?
Even when I removed the background in none state, I still get the gray background. So I made the button them self light blue, in order to show what I mean with the gray background behind the buttons.

3. How to make the interaction repeat itself?
Right now, I made the Drop Menu to move up when you hover the Dropdown Menu Button, but when I hover out and come back in, the menu stays at the position and repeat the action of appearing where it was and moving up again.
Even though I have it set on loop. So what exactly is the issue here?

Here is my public share link: https://preview.webflow.com/preview/experimentals?preview=6f6cdc8b54602ee8ec70f61374aaf96a

Hi Brian,

I’m not sure I totally get what you’re asking, but I’ll try to help.

  1. I’m presuming that in the Navigator panel, instead of seeing this:
  • Dropdown Buttons
  • Dropdown Buttons
  • Dropdown Buttons
    you’d rather see:
  • Our Works
  • About Us
  • Contact Us
    Is that what you’re saying? If so, then style a dropdown button with the common features you want for all the dropdown buttons (padding, margin, color, hover state, etc.). That makes it a Global Class, and let’s call it “dropdownButton”. Then when it’s like you want it, remove the Global Class, and add a class that describes your buttons. For example, assign “works” to the first one, “about” to the second, and “contact” to the third. Don’t bother styling them unless you want them to have different attributes than your global class.

After you’ve assigned the descriptor classes, then add the global class of “dropdownButton” to each of those buttons and it becomes a combo class, but now you can see the descriptors in the navigation panel. Only the first class name of an element is visible, so this is a workaround.

If that’s not what you meant, then I’m not sure what you’re talking about.

  1. Assign transparency to your background color. The default color of any element is that gray fill you’re seeing so you have to override it with transparent.

  2. I read and re-read this and am not sure what you’re shooting for, so I can’t help you with this one.

Hope this helps, and hope someone can help you with #3.

Hey Ctotty thanks for the reply, really appreciated. What I specifically is the gray background that’s left behind the menu buttons, even though I removed the transparency from it.

Ah, I see. Go to your “Dropdown Menu” element in your navigation panel and select it. Then go back to the style panel and change the #ddd in the background color to transparent. That should take care of it. :slight_smile:

Great! That solves 1 of the problem. Maybe you could share some insights for question number 1. Basically the question is, how do I know which classes is select in the Webflow Design if an element has multiple elements like so

| div | class “blue red” | … | end div |
(Can’t write markup in here)

Now I feel like I am spamming the thread. But I figured out Number 3.

I basically had to put another transform interaction and put the position back to 0, so that it moves back to its position. Now the last step would be to understand how to manipulate the last-child + first-child of the Drop Down Menu.

If an element has two classes assigned to it, it’s not a matter of “which” is assigned, they are “both” assigned. When you have more than one class assigned to an element, it’s called a combo class.

For example, if you have a div element assigned a .blue class, and you make the background blue, that’s pretty simple.
If you have a div element assigned a .red class, and you make the background red, that’s simple too. Those are both global classes.

If you take your div element with .blue assigned and also add the .red class to it, then the background will turn red because of the way classes are read by the software, the last class in a combo class will determine the attributes.

And here’s where it can get confusing… you can take your div element with the .blue .red combo class and start adding additional attributes, and create something that doesn’t have a blue OR red background!

I hope that didn’t confuse you more than help you, and I hope I was answering the right question. :slight_smile:

Glad you got number 3 figured out.

Interesting. So the last class is what the programs looks add when you have more than one classes, well that is good to know. Just tried it out, and it came out the way I wanted. Thank you for the help. :slight_smile: :tada:

It only takes on the attributes of the last class if that last class is a global one that only has the same attribute applied… I think. I’m not where I can test it right now.

For example, if the .blue global class from the previous example also had a black border, and the .red only had a background attribute and no others, I’m not sure if the black border would show when you create the combo class of .blue .red. You might want to test that. I think the last class’s attributes only take precedence over similar attributes in the first class.

Again, I can’t test this for a while, but I wanted to respond. You’ll want to play with it. That will help you understand what’s happening more than my poor attempts at explaining. I do know for sure that once you create a combo class, you can make very specific attributes that change what they were as global classes.

Honestly, I try not to mix global classes just because it leads to some confusion as to what is affected. I generally create a global class for elements I want to have similar attributes, and then add a non-global class just so I can make it specific for the purpose.

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.