CODEWITHSUNDEEP
cssionic-frameworkionic2ionic3
peterc
peterc

Reputation: 7843

How to set an Ionic (>=2) toolbar to a different background color than the navbar

I have an Ionic application where I would like to have a toolbar within the nav bar, where the toolbar has a different background color to the "top title" section of the navbar.

I have the following markup...

    <ion-header>

      <ion-navbar>      
        <ion-title>Main header</ion-title>       
      </ion-navbar>  

      <ion-toolbar style='background-color:green'> 
        <ion-title >Subheader</ion-title>    
      </ion-toolbar>

    </ion-header>

and also an example plunk here

Of course I'd like to do this in the sccs, (rather than inline style), but just trying to find how to override the default.

I would like the toolbar to be a different color as in the image below...

enter image description here

I set the navbar color using

.toolbar-background{
    background-color: color($colors, secondary-lite);
  }

which seems to set anything within the navbar.

Anyone know how I can just set this "secondary" toolbar?

Thanks in advance for any suggestions

Upvotes: 3

Views: 1757

Answers (2)

sebaferreras
sebaferreras

Reputation: 44659

The Ionic way to do that would be to include all the colors in the $colors map, and then use the color attribute of the ion-toolbar component:

<ion-header>

  <ion-navbar color="custom-blue">      
    <ion-title>Main header</ion-title>       
  </ion-navbar>  

  <ion-toolbar color="custom-green"> 
    <ion-title>Subheader</ion-title>    
  </ion-toolbar>

</ion-header>

And in your variable.scss file:

$colors: (
  primary:    #01579b,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,

  //...

  custom-blue:   #0277bd,
  custom-green:  #008c00
);

Upvotes: 2

mrmr68
mrmr68

Reputation: 177

exist a class in css and you need to overwrite or change style of class.

.toolbar-background-md {
    border-color: #b2b2b2;
    background: #f8f8f8;
}

Upvotes: 0

Related Questions