Topic: Changing Color on Pills
How to change color of the active pill? If it's not active it should stay white. Now it has the primary color.
<ul class="nav nav-pills nav-justified mb-3" id="ex1" role="tablist" style="width: 40%; margin: auto;">
<li class="nav-item" role="presentation">
<a
class="nav-link active"
id="tab-login"
data-toggle="pill"
href="#pills-login"
role="tab"
aria-controls="pills-login"
aria-selected="true"
>Login</a
>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
id="tab-register"
data-toggle="pill"
href="#pills-register"
role="tab"
aria-controls="pills-register"
aria-selected="false"
>Register</a
>
</li>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- User: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: 1.0.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No
Tags
Related topics
Marcin Luczak staff commented 4 years ago
Your code seems to be working fine. Here is a snippet for it showing that the first pill with class 'active" has primary color and the second pill without class 'active' stays white. https://mdbootstrap.com/snippets/standard/marcin-luczak/2546740?action=forum_snippet#html-tab-view
Or do you want to change the color of the active pill from primary to a different color?
EisGlockner commented 4 years ago
yeah exactly i want to change to color from primary to another color (example secondary). When i change the Backgroundcolor, the color get changed permanently. Not only when it's active. When the pill isn't activated, it should stay white
Marcin Luczak staff commented 4 years ago
For that you have to change the background color of the active pill class to a color of your need, e.g. for changing the background color of every pill inside .nav-pills list you would have to add this code to your style sheet:.nav-pills .nav-link.active { background-color: red;} I've updated snippet for that also.
EisGlockner commented 4 years ago
Awesome thanks!!