Ionic 4 how to adjust width of side menu?

Ionic Framework
1

Hot to reduce the width of sidemenu.

U can see it is controlled by --width but where to modify it? I am using Ionic + Vue

:host {
    --width: 304px;
    --width-small: 264px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
    position: absolute;
    contain: strict;
}
2

This does the trick

ion-menu{
  --width: 234px;
}
5 Likes
3

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

4

Iā€™m trying to adjust the menu width, ionic4 + angular, and tried to put the code on variables.scss and nothing happens.

Where exactly should I put the variable? is it possible? I need to customize a desktop app.

Thanks in advance.

5

Try this in your global.scss

.split-pane-visible >.split-pane-side {
    min-width: 150px!important;
    max-width: 150px!important;
  }
15 Likes
6

Thanks that works for my