Forum | Appery.io

Posted: **Mon Mar 20, 2017 7:55 pm**

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.

Posted: **Mon Mar 20, 2017 8:23 pm**

Hello Andy,

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

Posted: **Mon Mar 20, 2017 8:31 pm**

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?

Posted: **Tue Mar 21, 2017 4:13 pm**

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

Posted: **Tue Mar 21, 2017 4:45 pm**

many thanks once again! perfect!

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