CSS classes not applied in custom.css file

Hi,
and thank you for your answer.
Unfortunately, I'm working on my site on a local XAMPP so I cannot provide you credentials.
By the way.. I cleaned all the caches but the problem is not solved.

The css class
.megamenufoniafacile .sp-dropdown-inner { background-color: #fcc200 !important; border: 2px solid #ffffff !important; left: 0px !important;}

is not loaded in any way, now also in the custom code in the template.
In addition, if I change one of the three classes (for example the name of the class), the last one I modifiy works properly and one of the other two does not.

It seems to be something about a kind of priority or similar.

The css class .megamenufoniafacile .sp-dropdown-inner .... is not loaded in any way, now also in the custom code in the template.

Hi.

If in your Dev Tools, in the CSS window, you cannot find this element (CSS rule), it can only mean one thing: your selector is incorrect and is targeting a non-existent element, which is why it’s not there. There can be no other reason. It’s your mistake.

Without a link to your website, it’s impossible to help further.

The selector .megamenufoniafacile does look suspicious. It’s likely that it should be either .megamenu.foniafacile (if the element has both classes) or .megamenu .foniafacile (if .foniafacile is a child element of .megamenu). Double-check your HTML structure and adjust the selector accordingly.

Hi everyone,
I understand that you think it could be my mistake but, honestly, this would not explain why 2 of the 3 classes (which have the same structure) work and 1 does not.
For simplicity, I will explain what I did so you can correct me if necessary.

a) in the custom.css file I created the first rule
.mmfoniafacile .sp-dropdown-inner { background-color: #fcc200 !important; border: 2px solid #ffffff !important; left: 0px !important;}.
Then, I inserted the mmfoniafacile class into the "custom class" of the megamenu. And everything worked

b) I repeated the same thing for the other two rules
.mmavigafacile .sp-dropdown-inner { background-color: #03789E !important; border: 2px solid #ffffff !important;} and
.mmassistenz .sp-dropdown-inner { background-color: #40b1e2 !important; border: 2px solid #ffffff !important;}.

So, in fact, I did nothing more than a copy and paste of the same class structure, modifying, for each one, the background color. Nothing more.

But now, of the 3 rules, 2 work and 1 doesn't.

I don't understand where my mistake is.

Maybe it's better if I tell you what I want to achieve and you give me the correct css code?

Use this button to provide code

Maybe it's better if I tell you what I want to achieve and you give me the correct css code?

I reproduced your steps and everything works fine.

Perhaps you make a mistake somewhere.

For example, here.

Hi,
this is the code in my custom.css

.mmfoniafacile .sp-dropdown-inner { background-color: #fcc200 !important; border: 2px solid #ffffff !important; left: 0px !important;}

.mmavigafacile .sp-dropdown-inner { background-color: #03789E !important; border: 2px solid #ffffff !important;}

.mmassistenz .sp-dropdown-inner { background-color: #40b1e2 !important; border: 2px solid #ffffff !important;}

It seems similar to yours.

It also tries to insert "." before the custom class in megamenu setting but it does not work.
Some other css rules goes in conflict ?? It seems strange to me

I’m sorry, but without a link to the website, it’s impossible to figure this out. If everything is done correctly, it should work, as you could see from my previous post. I have no other ideas.

It also tries to insert "."

Just in case—this is not correct. There shouldn’t be dots there.

From your screenshot, everything looks correct. The only thing is that left: 0px !important doesn’t make sense in this context. However, it doesn’t affect anything.

The only thing I can further recommend is to change the class names to simpler ones or separate them with hyphens. It’s easy to make a typo or get confused with such names.