Hi Michelangelo,

Thank you for reaching out, and sorry for the inconvenience.

Please try clearing both your Joomla cache and browser cache, then test again.

If the issue persists, could you kindly provide Joomla administrator access? This will allow us to investigate the issue more thoroughly. Before sharing your credentials in hidden content, please ensure you've backed up your site using Akeeba Backup.

Thank you for your cooperation. I’ll keep you updated as soon as possible!

Best regards

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.

Hi Michelangelo,

I hope your custom CSS problem has been solved. I appreciate @Mr. Pavel for providing a helpful solution.

If you need any further assistance, feel free to ask. Also, if the solution provided has resolved the issue, you may mark the most useful answer to help others with similar queries and close the post.

Once again, thank you all for your contributions!

Best regards

Hi Asfakur,

my problem is not solved. The last problem I encountered is the following:

A stranger thing has just happened. I tried to assign to the megamenu1 the same css class (.mm-navigafacile) of the megamenu2. Result: everything works fine. If I set to megamenu1 his "old class" mm-foniafacile the problem appears again.

Pavel and I checked everything possible but did not found nor the problem, nor the solution.

Hi, the problem is the following. In custom.css I have those three classes

.mm-foniafacile .sp-dropdown-inner { background-color: #fcc200 !important; border: 2px solid #ffffff !important;}
.mm-navigafacile .sp-dropdown-inner { background-color: #03789E !important; border: 2px solid #ffffff !important;}
.mm-assistenza .sp-dropdown-inner { background-color: #40b1e2 !important; border: 2px solid #ffffff !important;}

those classes should work so that:

• if I hover on "NavigaFacile" menu item, the megamenu should follow mm-navigafacile .sp-dropdown-inner classes and background-color is correctly #03789E
• if I hover on "Assistenza" menu item, the megamenu should follow mm-assistenza .sp-dropdown-inner classes and background-color is correctly #40b1e2
• if I hover on "FoniaFacile" menu item, the megamenu should follow mm-foniafacile .sp-dropdown-inner classes and background-color is not #fcc200

I have checked the rules so many times and there's another strange thing: in the MegaMenu setting in the template, for the item "FoniaFacile" mm-foniafacile class does not work (the background color is not #fcc200) but mm-navigafacile does work (the background color is not #03789E). How can it be that?

Apologies for the inconvenience you’ve encountered. As my colleague @Saikat is currently on leave, I’ve taken it upon myself to investigate the issue and provide you with an update.

After reviewing the backup of your website in my local environment, I’ve identified that the issue stems from incorrect commenting in the custom.css file . Proper commenting is crucial for CSS code to function as expected, and this might have led to the issues you’re facing. I recommend correcting the comments in this file, and I believe this will resolve the problem.

Once you’ve made the necessary changes, I suggest testing the website to confirm the issue is resolved. If the problem persists or if you encounter any other difficulties, please don’t hesitate to reach out to me. I’ll be happy to assist you further to ensure everything runs smoothly.

Thank you for your patience and understanding.

Best regards

I apologize for the mistake so trivial and that I had absolutely not considered. By modifying the comments I solved everything. The small consolation is that I had not compiled the code badly :-)

Thank you for the support

No problem at all! I'm glad to hear that modifying the comments resolved the issue. It's always a good sign when the core code was correctly written. If you need any further assistance, feel free to reach out. Please marked the issue as solved.