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!