How to change ngb-tabset color/background color ?
If you tabs like this,
<ngb-tabset [destroyOnHide]="false" activeIds="ngb-tab-1"> <ngb-tab> <ng-template ngbTabTitle>Stores</ng-template> <ng-template ngbTabContent> <app-create-role></app-create-role> </ng-template> </ngb-tab> <ngb-tab> <ng-template ngbTabTitle>Coupons</ng-template> <ng-template ngbTabContent> <app-manage-project></app-manage-project> </ng-template> </ngb-tab> <ngb-tab> <ng-template ngbTabTitle>Categories</ng-template> <ng-template ngbTabContent> <app-workflow></app-workflow> </ng-template> </ngb-tab> <ngb-tab> <ng-template ngbTabTitle>Products</ng-template> <ng-template ngbTabContent> <app-configuration></app-configuration> </ng-template> </ngb-tab> </ngb-tabset>
and now like to change the color then do this way,
/* this is for clicked or active tabs */ .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background-color: #F4F4F4; color: #2E2A25; font-size: 15px; font-weight: bold; } /* this is for normal tabs */ .nav-tabs .nav-link{ background-color: #2E2A25; color: #F4F4F4; font-size: 15px; font-weight: bold; padding: 5px 25px; }
If you are using nested tabs and need to have two different styles for both, then you can use like this,
<div class="innerTab"> <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs" style="margin-left:10px;margin-bottom:5px;"> <li [ngbNavItem]="1"> <a ngbNavLink>Global</a> </li> </ul> </div>
and your styles will be,
/* this is for clicked or active tabs */ .innerTab .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background-color: blue; color: white; font-size: 15px; font-weight: bold; } /* this is for normal tabs */ .innerTab .nav-tabs .nav-link{ background-color: white; color: blue; font-size: 15px; font-weight: bold; padding: 5px 25px; }
not worked