Hi, I added a sidebar menu to my ionic page. On android it’s ok but on ios the header it’s too big
I guess something is wrong with your menu.page.html. You should share it also.
1 Like
<ion-menu [content]="content">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
Seems normal for ionic 3. Where do you test? iOS 13?
im testing on ios 12
Do you have a specific CSS for Header Page? Otherwise no more comment.
this is my header css
.header .header-title,
.header-nav .header-title {
position: absolute;
height: 55px;
line-height: 55px;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 12px;
color: #FFF;
font-weight: 700;
z-index: 1;
text-transform: uppercase;
bottom: 0px;
}
.header-subtitle {
font-size: 13px!important;
text-transform: none!important;
font-weight: 600!important;
transform: translateX(-5px);
}
.header .header-logo,
.header-nav .header-logo {
background-repeat: no-repeat;
background-position: center center;
height: 100%;
position: absolute;
z-index: 1;
left: 50%;
}
.header-fixed,
.header-nav {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 55px;
}
Because of z-index it seems on list and you define header height two times (First 55px then 100%). And i don’t think you need absolute.
Play with these.
1 Like
ok thank you
You are welcome.
You can start with deleting all css then add step by step.
1 Like