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

#1

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

Like this:https://www.google.com/design/spec/layout/structure.html#structure-toolbars

I have changed with scss

ion-toolbar{ height: 300px; }
ion-navbar{......}

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

#2

Hell @alfabc

Have you tried this ? http://ionicmaterial.com/

#3

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

#4

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

$navbar-ios-height
$navbar-md-height
$navbar-wp-height

#5

Here is the documentation that xr0master refers:

#6

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

#7

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.

3 Likes
How to change ion-header heigth having a fixed ion-content?
#8

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.

#9

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;
  }