You did not provide css
, so I can only provide my option.
I would configure <ion-header-bar>
inside <ion-side-menu>
as follows:
<ion-header-bar class="bar-profile">
<div class="profile">
<img class="profile-picture" src="http://ionicframework.com/img/docs/mcfly.jpg" />
<h3 class="name">Thronester</h3>
</div>
</ion-header-bar>
using this css:
.bar.bar-profile {
background-color: #444;
height: 170px;
}
.bar .profile {
top: 0;
right: 0;
left: 0;
z-index: 0;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
padding-top: 15px;
}
.profile .name {
color: #FFFFFF;
margin-top: 10px !important;
margin-bottom: 10px !important;
}
.profile-picture {
border-radius: 50%;
}
.menu .has-header
{
top: 169px;
}
The end result can be seen here .
source
share