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.


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;

I am trying to do the opposite thing in Ionic4: get a toolbar about half its normal size. This is how it looks normally with the toolbar at its normal size:

Then I applied a class to the ion-toolbar tag:

.app-header-statusbar {
	font-size: 80%;
	vertical-align: middle;
	max-height: 24px !important;

And this is how it looks afterwards:

Toolbar height is affected alright, but the content is not adjusting automatically. Any ideas of how to get the inner elements realign to the new height?


1 Like