Topic: Side Navigation Text Color
Hi. I am trying to change the color of the text in the sidenav ( both clicked and normal )
Currently the clicked version is the normal blue text you'd expect from an <a> element, and the normal text is grey.
I would like to know which CSS to use to override these values so that i can make the text green on selection and a darker grey normally.
Also i am not sure if this is normal but if i click on 2 of these items in the list, they both turn blue ( instead of the old one returning to grey )
Below is how I've written the HTML for the sidenav
I would like to know which CSS to use to override these values so that i can make the text green on selection and a darker grey normally.
Also i am not sure if this is normal but if i click on 2 of these items in the list, they both turn blue ( instead of the old one returning to grey )
Below is how I've written the HTML for the sidenav
<mdb-side-nav #sidenav class="fixed mr-5 side-nav-light white" [fixed]="true"> <li style="margin-top:150px;"> <ul class="collapsible collapsible-accordion"> <mdb-accordion [multiple]="false"aria-multiselectable="false"> <mdb-accordion-item class="no-collase"> <mdb-accordion-item-head> <h4 style="font-size: 1.4em;"> <strong>Website Stats</strong> </h4> </mdb-accordion-item-head> </mdb-accordion-item> <mdb-accordion-item class="no-collase"> <mdb-accordion-item-head mdbWavesEffect>Overall</mdb-accordion-item-head> <mdb-accordion-item-body></mdb-accordion-item-body> </mdb-accordion-item> <mdb-accordion-item class="no-collase"> <mdb-accordion-item-head mdbWavesEffect>Performance</mdb-accordion-item-head> <mdb-accordion-item-body></mdb-accordion-item-body> </mdb-accordion-item> </mdb-accordion> </ul> </li> <div class="sidenav-bg mask-strong"></div> </mdb-side-nav>
Dear 1P3Cmdb,
You can change the colors of the sidenav with skin class, for example - .light-blue-skin, or .white-skin.
Those classes need to be added on body element in your index.html file.
Here you can find more skins: https://mdbootstrap.com/angular/css/skins/
If you want to change only the color of the mdb-accordion-item-head, you can change it by using below css code:
Best Regards,
Damian
mdb-accordion-item .card mdb-accordion-item-head .card-header a h5 {
color: red !important;
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 6.2.2
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Damian Gemza staff commented 5 years ago
Dear 1P3Cmdb, Your code is not working for me - after click in the sidenav link, nothing happens. Could you please provide me the full code or reproduction repository? Best Regards, Damian1P3Cmdb pro commented 5 years ago
The side-nav has no functionality yet. My question is with regards to the styling of the text color, the code snippet above is enough for this purpose, no? All I want to know is how to change the text's color, I don't wish to change anything with regards to functionality. The code above is directly from this page on mdbootstrap : https://mdbootstrap.com/angular/advanced/sidenav/#usage