Hi Guys,
Using the Sphere template and I would like to change the colour of active sp-group-title however it appears as though this class isn't allocated to these menu items.
How would I go about changing these menu item active colours?
Website address is https://usng02.directrouter.com/~wwmvqgmg/
I have found a work around to this issue - I've added the following code to my custom CSS
[aria-current="page"] {
/* Your styles here */
}and this has styled that 'active' menu item that's been given the sp-group-title class but not allocated as 'active'.
Thanks for sharing.
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.
Hi
Use this CSS for dropdown menu color
.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a {
color: blue !important;
}
.sp-megamenu-parent .sp-mega-group>li>a {
color: #2a7ea1!important;
}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?
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 :-(
Clear your joomla and browser cache then check again.
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.
Thanks, allow me some time please, I have to talk with my team.
Hi Guys - any word on this? It's been over a week and no response?
I need to inform them again, allow me some time please.
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?
Give me your super admin access please.
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
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.
Could you please create a new forum post about it?
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?
Ok I will add it in our list.