How can I control the color of the arrows to expand accordion menus
Hello - I'm building based on Demo39
I have the accordion menu on the left side
When there are sub-menus, there is a very faint arrow pointing down that can be expanded
I've gone through the CSS and tried updating colors where I could, but I can't find how to change the color of this arrow, shown in the box:
https://app.screencast.com/Hc9wMaISlJDPS
Where can I set this to be darker / more visible?
Thank you
Replies (5)
Hi,
To change the menu elements' colors in HTML please refer to this guide.
If you like to customize it in SASS you can use src/sass/layout/_sidebar.scss and refer to $arrow-color: var(--#{$prefix}primary), for hover, active, show and default states.
Then recompile your assets folder with Gulp or Webpack.
Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment, you will only need the compile assets, no need to install the build tools dependencies there.
Regards.
Thank you - I had found that and tried it but it did not work.
I had GPT analyze the page (don't laugh at me) and it suggested this, which worked:
/* Change the color of the down arrows - first tier */
.menu-item .menu-link .menu-arrow:after {
background-color: var(--bs-gray-700)!important;
}
/* Change the color of the down arrows - second tier */
.app-sidebar-menu-primary.menu>.menu-item .menu-item .menu-link .menu-arrow:after {
background-color: var(--bs-gray-700)!important;
}
I have this in a style.css that is imported after all of the standard CSS files.
I suspect the recommendation conflicted with or was overridden by the other classes already defined at the top of the sidebar menu:
<div data-kt-menu="true" data-kt-menu-expand="false" class="app-sidebar-menu-primary menu menu-column menu-rounded menu-sub-indention menu-state-bullet-primary px-3 mb-5 ">
Or perhaps by one of these:
<div class="menu-sub menu-sub-accordion">
<div class="menu-item">
...
I'd prefer your method to stay closer to the core methodology... do you see any of the above causing conflicts? They are lifted from the demo site.
Thank you
Hi,
The above customization should work if its properly appended. Can you share your site via a test link? I could check it online remotely. If you can't provide the test link please provide me with your requirements and i will try to implement it here and send you a guide. Have you customized the sidebar menu ? if yes, only this arrow part did not work ?
Regards.
Our blog offers in-depth reviews,comparisons,and expert tips to help you make informed decisions. Discover this comprehensive guide to finding the best essay writing service. Whether you're a student in need of academic support or a writer seeking reputable platforms,we've got you covered.
