Advertisement
Off canvas: How to Only color the active submenu item
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.
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.
-
- Joomla! Intern
- Posts: 80
- Joined: Mon Aug 29, 2022 10:37 am
Off canvas: How to Only color the active submenu item
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?
at www.sterrenwachtasten.nl?
What should the css code be?
Advertisement
-
- Joomla! Fledgling
- Posts: 1
- Joined: Tue Aug 29, 2023 8:34 am
Re: Off canvas: How to Only color the active submenu item
The website you mentioned uses the Bootstrap framework
use this code
.navbar-nav .active > .nav-link {
color: #ffffff;
background-color: #000000;
}
use this code
.navbar-nav .active > .nav-link {
color: #ffffff;
background-color: #000000;
}
- Pavel-ww
- Joomla! Ace
- Posts: 1760
- Joined: Tue Jun 30, 2020 12:17 pm
Re: Off canvas: How to Only color the active submenu item
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 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?
-
- Joomla! Intern
- Posts: 80
- Joined: Mon Aug 29, 2022 10:37 am
Re: Off canvas: How to Only color the active submenu item
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?
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?
-
- Joomla! Intern
- Posts: 80
- Joined: Mon Aug 29, 2022 10:37 am
Re: Off canvas: How to Only color the active submenu item
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?
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?
-
- 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
Try instead:
Code: Select all
#sp-menu li.current-item {
color: #fff;
background-color: #000;
}
- Pavel-ww
- Joomla! Ace
- Posts: 1760
- Joined: Tue Jun 30, 2020 12:17 pm
Re: Off canvas: How to Only color the active submenu item
Hi. Here isliekecomp2022 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?
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;
}
-
- Joomla! Intern
- Posts: 80
- Joined: Mon Aug 29, 2022 10:37 am
Re: Off canvas: How to Only color the active submenu item
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?
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.
-
- Joomla! Enthusiast
- Posts: 128
- Joined: Thu Mar 20, 2014 1:29 pm
Re: Off canvas: How to Only color the active submenu item
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
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.
- ceford
- 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
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
- Joomla! Ace
- Posts: 1760
- Joined: Tue Jun 30, 2020 12:17 pm
Re: Off canvas: How to Only color the active submenu item
Ahh sorry. It is about offcanvas.
First - delete your code from template.css and never edit this file. --
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.
-
- Joomla! Intern
- Posts: 80
- Joined: Mon Aug 29, 2022 10:37 am
Re: Off canvas: How to Only color the active submenu item
HET WERKT! PERFECT DANK JE!
-
- Joomla! Intern
- Posts: 80
- Joined: Mon Aug 29, 2022 10:37 am
Re: Off canvas: How to Only color the active submenu item
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.
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.
-
- 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
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;
}
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
- 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
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.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?
You do not have the required permissions to view the files attached to this post.
-
- Joomla! Intern
- Posts: 80
- Joined: Mon Aug 29, 2022 10:37 am
Re: Off canvas: How to Only color the active submenu item
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?
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
- Joomla! Ace
- Posts: 1760
- Joined: Tue Jun 30, 2020 12:17 pm
Re: Off canvas: How to Only color the active submenu item
Hi.liekecomp2022 wrote: ↑Thu Nov 14, 2024 1:04 pm It is at the development environment ontwikkel12.comp-it-aut.nl.
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;
}
-
- Joomla! Intern
- Posts: 80
- Joined: Mon Aug 29, 2022 10:37 am
Re: Off canvas: How to Only color the active submenu item
Dit werkt! THANKS
Advertisement