Ion-tabs selected tab css not working


I am using static ion-tabs, because i don’t need routing since I only have 1 page. I needed to add opacity: 1 to .tabbar at the css to show the ion-tabs, but now the css doesnt work of selected tabs. Is there a solution for this?

<ion-content padding>
  <div #content></div>
      <ion-tab *ngFor="let item of menuItems" tabTitle="{{item?.name}}" tabIcon="home" (ionSelect)="testFunc(">
.tabbar {
    opacity: 1 !important;

in Html :

<ion-tabs class="tabs-icon-top tabs-positive">

You can oversight css in


It doesn’t work, the color and icon in the tab stay black, doesnt matter if i click on it or not.

Hi @woutergoku


.tabs .tabbar {
background-color: #fff;

are you trying to change the color of tab background when active? If that’s the case, please try this:

Add [color]=“variable” inside tag
Add (ionSelect)=“selectContact()” inside where you want to change the background color when active
Add a string variable to store the value of color
Add a function to change the variable. E.g.:
this.color = “danger”;

Yeah I meant when active… It’s still not working and I cannot even click any dynamically loaded components or anything. Using static tabs is a thing Ionic doesn’t like apparantely xD



.tabs .active{


I really appreciate your answers, but I guess the whole static tabs(without routing) isn’t working. Nothing seems to be working. Not sure how to fix it.

do you want to change the tab icon color or background color ?

1 Like

Text and icon color… but I cannot interact with the page using static tabs and it all feels weird, it’s like Ionic doesnt accept static tabs or whatsoever.

in variables.scss :

$tabs-md-tab-text-color-active: #ffeeee

$tabs-md-tab-icon-color-active: #ffeeee