Advertisement

Off canvas: How to Only color the active submenu item

Everything to do with Joomla! 4.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
liekecomp2022
Joomla! Intern
Joomla! Intern
Posts: 80
Joined: Mon Aug 29, 2022 10:37 am

Off canvas: How to Only color the active submenu item

Post by liekecomp2022 » Tue Aug 29, 2023 8:08 am

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?

Advertisement
OliverBrown
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Tue Aug 29, 2023 8:34 am

Re: Off canvas: How to Only color the active submenu item

Post by OliverBrown » Tue Aug 29, 2023 8:53 am

The website you mentioned uses the Bootstrap framework

use this code

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

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1760
Joined: Tue Jun 30, 2020 12:17 pm

Re: Off canvas: How to Only color the active submenu item

Post by Pavel-ww » Tue Aug 29, 2023 10:46 am

liekecomp2022 wrote: Tue Aug 29, 2023 8:08 am 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
Joomla! Intern
Joomla! Intern
Posts: 80
Joined: Mon Aug 29, 2022 10:37 am

Re: Off canvas: How to Only color the active submenu item

Post by liekecomp2022 » Tue Aug 29, 2023 12:10 pm

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
Joomla! Intern
Joomla! Intern
Posts: 80
Joined: Mon Aug 29, 2022 10:37 am

Re: Off canvas: How to Only color the active submenu item

Post by liekecomp2022 » Tue Oct 03, 2023 7:50 am

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
I've been banned!
Posts: 347
Joined: Mon Jul 03, 2023 7:08 pm

Re: Off canvas: How to Only color the active submenu item

Post by nacc » Tue Oct 03, 2023 8:13 am

Try instead:

Code: Select all

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

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1760
Joined: Tue Jun 30, 2020 12:17 pm

Re: Off canvas: How to Only color the active submenu item

Post by Pavel-ww » Tue Oct 03, 2023 9:22 am

liekecomp2022 wrote: Tue Oct 03, 2023 7:50 am 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
Joomla! Intern
Joomla! Intern
Posts: 80
Joined: Mon Aug 29, 2022 10:37 am

Re: Off canvas: How to Only color the active submenu item

Post by liekecomp2022 » Tue Oct 03, 2023 10:02 am

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?
You do not have the required permissions to view the files attached to this post.

Leen57
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 128
Joined: Thu Mar 20, 2014 1:29 pm

Re: Off canvas: How to Only color the active submenu item

Post by Leen57 » Tue Oct 03, 2023 10:21 am

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
You do not have the required permissions to view the files attached to this post.

User avatar
ceford
Joomla! Hero
Joomla! Hero
Posts: 2942
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Off canvas: How to Only color the active submenu item

Post by ceford » Tue Oct 03, 2023 10:24 am

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;
}

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1760
Joined: Tue Jun 30, 2020 12:17 pm

Re: Off canvas: How to Only color the active submenu item

Post by Pavel-ww » Tue Oct 03, 2023 11:01 am

liekecomp2022 wrote: Tue Oct 03, 2023 10:02 am 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;
}
You do not have the required permissions to view the files attached to this post.

liekecomp2022
Joomla! Intern
Joomla! Intern
Posts: 80
Joined: Mon Aug 29, 2022 10:37 am

Re: Off canvas: How to Only color the active submenu item

Post by liekecomp2022 » Tue Oct 03, 2023 12:38 pm

HET WERKT! PERFECT DANK JE!

liekecomp2022
Joomla! Intern
Joomla! Intern
Posts: 80
Joined: Mon Aug 29, 2022 10:37 am

Re: Off canvas: How to Only color the active submenu item

Post by liekecomp2022 » Mon Jan 29, 2024 9:35 am

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
Joomla! Intern
Joomla! Intern
Posts: 80
Joined: Mon Aug 29, 2022 10:37 am

Still an issue! Off canvas: How to Only color the active submenu item

Post by liekecomp2022 » Tue Nov 12, 2024 3:52 pm

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;
}

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1760
Joined: Tue Jun 30, 2020 12:17 pm

Re: Still an issue! Off canvas: How to Only color the active submenu item

Post by Pavel-ww » Wed Nov 13, 2024 7:39 am

liekecomp2022 wrote: Tue Nov 12, 2024 3:52 pm 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
You do not have the required permissions to view the files attached to this post.

liekecomp2022
Joomla! Intern
Joomla! Intern
Posts: 80
Joined: Mon Aug 29, 2022 10:37 am

Re: Off canvas: How to Only color the active submenu item

Post by liekecomp2022 » Thu Nov 14, 2024 1:04 pm

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?

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1760
Joined: Tue Jun 30, 2020 12:17 pm

Re: Off canvas: How to Only color the active submenu item

Post by Pavel-ww » Fri Nov 15, 2024 6:44 am

liekecomp2022 wrote: Thu Nov 14, 2024 1:04 pm 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
Joomla! Intern
Joomla! Intern
Posts: 80
Joined: Mon Aug 29, 2022 10:37 am

Re: Off canvas: How to Only color the active submenu item

Post by liekecomp2022 » Fri Nov 15, 2024 11:32 am

Dit werkt! THANKS

Advertisement

Post Reply

Return to “Templates for Joomla! 4.x”