Side Navigation Text Color

web
mobile

Topic: Side Navigation Text Color

1P3Cmdb pro asked 2 years ago

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

Damian Gemza staff commented 2 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, Damian

1P3Cmdb pro commented 2 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

Damian Gemza staff answered 2 years ago

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:
mdb-accordion-item .card mdb-accordion-item-head .card-header a h5 {

color: red !important;

}
Best Regards, Damian
Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 6.2.2
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No
Tags