Andy Parker
Posts: 0
Joined: Wed Mar 27, 2013 10:21 am

CSS to set height of HEADER bar (set on index page) in IONIC Project

Can someone tell me what CSS I need to set the height of the header bar in a n IONIC project please?

I've tried setting a class to:
code
.header {
height: 5vh !important;
}
/code

and also tried setting the "lineheight" as well.....

I am using a side bar as well, so the sidebar icon needs to change appropriately as well.

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

CSS to set height of HEADER bar (set on index page) in IONIC Project

Hello Andy,

Please use CSS below for that:
pre.bar.bar-header{
height:50px;
background:red;
overflow:hidden;
}/pre

Andy Parker
Posts: 0
Joined: Wed Mar 27, 2013 10:21 am

CSS to set height of HEADER bar (set on index page) in IONIC Project

thank you Sergiy, it works, but the text stays very low, is there a way of moving the text in the header up as well?

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

CSS to set height of HEADER bar (set on index page) in IONIC Project

Please play with the property "top" for that, like:
pre.bar.bar-header .title{
top: 3px;
}/pre

Andy Parker
Posts: 0
Joined: Wed Mar 27, 2013 10:21 am

CSS to set height of HEADER bar (set on index page) in IONIC Project

many thanks once again! perfect!

Return to “Issues”