How to change navbar or toolbar height like android material style?


I want to set style navbar or toolbar like android material style expanded toolbar?

Like this:

I have changed with scss

ion-toolbar{ height: 300px; }

but not working. Is there any way or any component to achive this?


Hell @alfabc

Have you tried this ?


Yes I have tried. But I am asking ionic2 solution actually.


ionic2 solution is read documentation. Why you don’t try it?



Here is the documentation that xr0master refers:


I know variables. But i want only some pages not in all pages. Css customization not working for a page


In this case, you can just customize the scss for that page.

For example, the blank starter has a home page.

so I can use

.md {
  .home-page {
    ion-navbar.toolbar {
      min-height: 200px;

in my home.scss file.

How to change ion-header heigth having a fixed ion-content?

Thanks @mhartington finally. min-height is the solution. But when toolbar height increase every inner item stucks middle of the container. Must be change display value with block or something else.

Thanks again.


Don’t forget to specify all platforms. You can add this in app.scss

//makes header bigger site wide on ionic serve
ion-navbar.toolbar {
    min-height: 94px!important;
//on Android
ion-navbar.toolbar-md {
    min-height: 94px!important;
//on iOS
ion-navbar.toolbar.toolbar-ios {
    min-height: 94px!important;