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

Ionic Framework ionic-v3
#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;
  }
#10

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:

13%20PM
Screen Shot 2019-08-17 at 8.28.13 PM.png950×128 5.15 KB

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:

32%20PM
Screen Shot 2019-08-17 at 8.44.32 PM.png952×101 3.16 KB

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?

TIA

1 Like