keshav godani
keshav godani

Reputation: 313

how to change background color in ion side menu in ionic 4

I have a Ionic-v4-app with an side-menu structured like that:

<ion-app>
        <ion-split-pane>
            <ion-menu> 
                <ion-header>
                    <ion-toolbar>
                        <ion-item>
                            <ion-item class="item item-block item-md">
                                <ion-thumbnail slot="start">


    <img *ngIf="userProfile?.ProfileInformation" class="profileImg" style="height: auto;" [src]="userProfile.ProfileInformation.doctorProfile" />

                                </ion-thumbnail><br><br>
                                <div class="ion-text-capitalize" style="text-transform: capitalize;">
                                    {{ userProfile?.ProfileInformation?.doctorName }}
                                </div>
                            </ion-item>
                        </ion-item>
                    </ion-toolbar>
                </ion-header>
                    <ion-content>
                        <ion-list>
                            <ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
                                        <ion-item [routerLink]="[p.url]" routerDirection="root">
                                            <ion-icon item-left [name]="p.icon" style="zoom: 1;"></ion-icon>
                                            <ion-label style="margin: 12px;">
                                                {{ p.title }}
                                            </ion-label>
                                        </ion-item>
                            </ion-menu-toggle>
                        </ion-list>
                    </ion-content>
            </ion-menu>
        <ion-router-outlet main></ion-router-outlet>
        </ion-split-pane>
    </ion-app>

Now I want the have a background for the whole side-menu

I tried a background colour for ion-menu and transparent background for header and content, but also not working.

Upvotes: 1

Views: 1043

Answers (1)

thunk
thunk

Reputation: 574

see this answer. I added this to my menu page custom scss, and it worked for me.

Upvotes: 1

Related Questions