2019 ionic 4 custom ion-menu width not working

Cheers I have an ion menu that I wanna make smaller, about 50% of the screen instead of the default width. I swear I have checked out every single post on the ionic forum and stackoverflow about this and tried everything people have posted in the past but nothing worked, what am I supposed to do to get it done?

Can you post your css?

I’d check here for menu css variables

Cheers, ye sure, although I don’t think I have anything special in my css, just some simple stuff to make the side menu look better

Well yeah I have tried every bit of css I have found on forums to make the side menu smaller but nothing has worked

Try adding --max-width: 200px or your desired width to the ion-menu-button block
If you want the menu smaller than default use --max-width, and if you want it larger use --min-width

Where and how exactly do I use the max and min width tags? Because I have tried them already, both with inline styling aswell as putting it in the global.scss for the ion-menu and it just doesn’t work

ion-menu {
    --max-width: 200px;
    // OR
    --min-width: 200px;

Also check your package.json to make sure you’re on the latest @ionic/angular version

1 Like

Welp that was the first thing I tried like 2 hours ago, doesn’t work.
Also yes I am running the latest version of ionic/angular.

Is './app.component.scss' added to your app.component.ts @Component styleUrls array? I’ve noticed the ionic CLI doesn’t give you an app component css page to start

1 Like

I am using the sidemenu template, not the blank one, and it didn’t create a component.scss
and since the menu’s html is in the component.html and I dont have a scss file just for it, I put the scss code for the ion-menu in the global.scss file, but I’ve tried in line styling the ion-menu aswell

You can manually add a scss called app.component.scss and add

styleUrls: ['./app.component.scss']

To your app.component.ts @Component decorator. This way you can maintain styling similar to the rest of the pages/components. I think it has to be applied to the app component, not globally

1 Like

Welp it didn’t work again using
ion-menu {
–max-width: 200px;
in the newly created app.component.scss, i just got mad, created a new project and copy pasted all the pages and services and scss and assests into the new project, and now it works perfectly.
I’m left with no words, thanks mate for trying to help me out but turns out it was something to do with the project, when everything is fully updated on a clear project, its working perfectly!

Wow. yeah that’s really weird because my examples were how I’ve definitely achieved it before so I’m not sure what would have been preventing it in your project and not in a new one. Good thinking though!

1 Like

There is something else in my mind now, I was thinking of replacing the static width’s value
ion-menu {
–max-width: 200px;
in the scss file to something more dynamic like, if he is logged in then have a max width and if he isn’t then have another, I tried this:
<ion-menu [–max-width]=“isLoggedIn ? ‘275px’ : ‘200px’”>
but console outputs “Can’t bind to ‘–max-width’ since it isn’t a known property of ‘ion-menu’.”
I tried with max-width too, doesn’t recognize the property

Do you have any ideas how I could accomplish this?


[ngStyle]="{'--max-width': isLoggedIn ? '275px' : '200px'}"

I just looked up the syntax for a conditional ngstyle and what you proposed really seems to be it, but unfortunately it’s not working, its not giving me any error about it in the console, but it isn’t changing the menu’s width either, have you used something like this before?

For now I’m going to be doing this, since it works

<ion-menu type=“overlay” [class.menuBig]=‘isLoggedIn’ [class.menuSmall]=’!isLoggedIn’>

–max-width: 200px;

–max-width: 270px;

but I really wanted the conditional ngStyle to work exactly like you suggested since its way more clean, I tried another conditional ngstyle and it worked, so I’m guessing it’s not working on the property --max-width

ion-menu position is absolute. and u will have to change width of ion-header, ion-content, ion-footer inside that ion-menu. TTRockStars

Ah my mistake
Can you use ngClass in a similar way?, Have 2 classes with your --max-width values, and toggle between those

The code I shared works perfectly, I just wished the ngStyle worked aswell since it is way more clean but its alright, thank you for your help!

NgClass is slightly more clean, only 1 line

[ngClass]="{'menuSmall': !isLoggedIn, 'menuBig': isLoggedIn}"

But this should work exactly the same to your [class.xxxxx]