Hi

Thanks for contacting us. You can use this custom CSS

.sp-megamenu-parent>li.active>a{
  color:red !important;
}
.sp-megamenu-parent>li:after {
    background: red !important;
}

Go to system--> https://prnt.sc/tDbSUJh6LiGu --> Default template-->Template options--> https://prnt.sc/A5nlsBvCQsqs And add your CSS there.

-Regards.

That's great and thankyou however, that changes the main menu items.

Apologies - I should have specified that I require the dropdown menus to be a different colour.

Again - I appreciate this answer however, this is for the general menu items, not the active menu.

I'm looking for a way to change the colour of the 'active' menu items in the dropdown.

I've tried several variations of adding :active and .current to the CSS classes, but nothing seems to want to work.

See this image for further explanation

Did you try this option?

https://prnt.sc/N5do42dCfp5O

Yes - I have the HEX code in there - but unfortunately the system isn't picking this up.

I believe this solution works for general drop down menus as it adds the class "sp-menu-item current-item active" to them, however these are Menu item headers using the mega menu structure, so the class is "item-180 menu_item item-header" - Hence why there seems to be no way to make the active colour work.

Try this CSS in your custom.css file

.sp-megamenu-parent .sp-mega-group>li>a:active {
    color: #3daf2c !important;
}

I've now added this and unfortunately this doesn't work :-(

Done - tested and still not working.

Usually an active menu will have classes (like active) added to it when clicked. There's no class added to Menu item headers using the mega menu structure to differentiate them as active, therefore targeting them with any :active CSS, I can't see working.

Any other ideas or is this something the Dev's will need to update in thye next round of template updates?

I need to inform my team, allow me some time please.

Ok - thank you. Apprecite you looking into it further.

Hi Guys - any word on this? It's been over a week and no response?

So is this a development issue that needs to be fixed with a template update, or are you able to provide a file replacement to solve the issue?

Have added super admin details below.

Now check please, I have used this css

.sp-megamenu-parent .sp-mega-group>li>a:hover{
  color:orange !important;
}

.sp-megamenu-parent .sp-mega-group>li>a{
   color:orange !important;
}

Please guys - can you read the requests properly - ACTIVE colour.

You've added CSS to the hover and a href of the menu item.

I've tried to be very clear about changing the ACTIVE colour of the menu item headers. I've even outlined the issue that menu item headers do not add the active class in the Sphere template.

I don't see how any CSS you try will work unless there's a different class added to active menu items?

This is a development issue with the template (or possibly the helix system if that's running the menu module) - not adding the active class to menu item headers.

Here's the Active class in a normal menu item.

Here's NO Active class in a menu item header.

Please get this fixed.

Please first remove these two css from your custom.css file

https://we.tl/t-ASzpVIVTvF

Please remove line no 114 and 109

And then set your active color from preset and then clear your Joomla and browser cache then check again.

That didn't work.

That makes no sense? I've articulated very clearly what the issue is.

Can't you simply add this to your Fix List for the Dev's on their next round of updates?