Ios side-menu header is too big

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. :confused:

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 :grinning:

You are welcome.

You can start with deleting all css then add step by step.

1 Like