Off canvas: How to Only color the active submenu item

[liekecomp2022]

How can I only color the active submenu item instead of all at the off canvas menu?
at www.sterrenwachtasten.nl?
What should the css code be?

[OliverBrown]

The website you mentioned uses the Bootstrap framework

use this code

.navbar-nav .active > .nav-link {
color: #ffffff;
background-color: #000000;
}

[Pavel-ww]

How can I only color the active submenu item instead of all at the off canvas menu?
at www.sterrenwachtasten.nl?
What should the css code be?

Hi. Looks like you edited template.css. Never edit core template's files. In Helix you can create custom.css file and use it for your code. But in your current case CSS not need. Remove your code from template.css, and set up colors via Helix settings.

[liekecomp2022]

This is about the Joomla CMS.
I use the Helix Ultimate template and SP Page Builder in Joomla 4 for the website www.sterrenwachtasten.nl

The code below does not work:

.navbar-nav .active > .nav-link {
color: #ffffff;
background-color: #000000;
}


The CSS should only color one active submenu item yellow and nog all the submenu items when the main item is active.

Anyone the solution?

[liekecomp2022]

This is about the Joomla CMS.
I use the Helix Ultimate template and SP Page Builder in Joomla 4 for the website www.sterrenwachtasten.nl

The code below does not work:

.navbar-nav .active > .nav-link {
color: #ffffff;
background-color: #000000;
}


The CSS should only color one active submenu item yellow and nog all the submenu items when the main item is active.

Anyone the solution?

[nacc]

Try instead:

Code: Select all

#sp-menu li.current-item  {
    color: #fff;
    background-color: #000;
}

[Pavel-ww]

The CSS should only color one active submenu item yellow and nog all the submenu items when the main item is active.

Anyone the solution?

Hi. Here is

Code: Select all

/*For top level*/
.sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li.active:hover > a {
	color: yellow;
}
/*For sublevels*/
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a {
	color: yellow;
}

[liekecomp2022]

This is not working as I want.
After selecting a subitem, alle the subitems and also the main item become yellow (see attachment).
It should be that after visiting the subitem only the subitem remains yellow.

Someone another suggestion?

[Leen57]

when I view the website with firefox it seems to work well,
only one changes color and when I select another menu item, it is white again

[ceford]

Try this (you may need/want to change bg color):

Code: Select all

.main-nav a.mm-active {
  background-color: var(--template-bg-dark-70);
  color: yellow;
}

[Pavel-ww]

This is not working as I want.

Ahh sorry. It is about offcanvas.

First - delete your code from template.css and never edit this file.

2.jpg

--


Create custom.css and use only this file for your code.

Code: Select all

/*First level*/
.offcanvas-menu .offcanvas-inner ul.menu > li.active > a {
    color: #ffc700;
}
/*Sub levels*/
.offcanvas-menu .offcanvas-inner ul.menu>li li.active a {
    color: #ffc700;
}

[liekecomp2022]

HET WERKT! PERFECT DANK JE!

[liekecomp2022]

I have deleted the code you mentioned above in de template.css.
However after migrating from Joomla 4 to Joomla 5 the template.css is adjusted and the code has come back.

Can you provide me the correct code for in de custom.css to get a permanent solution?

For now, I have deleted the code again.
But this is not the best way...

Thanks.

[liekecomp2022]

When I update Joomla my off canvas problem appears again!
I had to delete some lines in de template.css, see door Pavel-ww » di okt 03, 2023 1:01 pm.
And add the code below:
But every time a new version of Joomla appears, I have to delete the code again.

Can someone help me so I can put the correct code in the custom.css so that this works forever?

The current code in the custom.css looks like:

/*First level*/
.offcanvas-menu .offcanvas-inner ul.menu > li.active > a {
    color: #ffc700;
}
/*Sub levels*/
.offcanvas-menu .offcanvas-inner ul.menu>li li.active a {
    color: #ffc700;
}

[Pavel-ww]

Can someone help me so I can put the correct code in the custom.css so that this works forever?

Hi. I do not see any problem. Everything works correctly. Joomla updates do not affect this. This code works forever. Perhaps you just need to clean the cache after updating.

1.jpg

[liekecomp2022]

It is at the development environment ontwikkel12.comp-it-aut.nl.
Here I test the Joomla update..
Here the problem is...

I would like to have a solution in the custom.css.
So in future we don't get the same problem everytime we update Joomla.

Can you help me?

[Pavel-ww]

It is at the development environment ontwikkel12.comp-it-aut.nl.

Hi.

Ok, now I see.

Here is

Code: Select all

/*Reset default style*/
.offcanvas-menu .offcanvas-inner ul.menu li.active a {
    color: #fff;
}
/*First level*/
.offcanvas-menu .offcanvas-inner ul.menu>li.active>a {
    color: #ffc700 !important;
}
/*Sub levels*/
.offcanvas-menu .offcanvas-inner ul.menu>li li.active a {
    color: #ffc700 !important;
}

[liekecomp2022]

Dit werkt! THANKS