Can I change the width of Side menu with css?

1

Hi All,
Is there any way to change the width of side menu with only css file ? I mean without any change in lib directory in ionic ??

1 Like
2

Hello,
just add the “width” attribute the “ion-side-menu” element.

Example here

Documentation here
http://ionicframework.com/docs/api/directive/ionSideMenu/

1 Like
3

Thank you very much @weeman
but I need to change it in CSS not in html
Is there anyway to do this ?

Thanks in advance

4

The width attribute is part of the side-menu so that it knows how far to translate on swipe.
Even if you did change it with css, the side-menu directive would still use the default value of 275.

1 Like
5

Then… Unfortunately I can’t do it
Thank you for your response,

7

Yes it is possible, with !important word in the CSS:

.menu.menu-left{
	width: calc(100% - 70px) !important;
}
.menu-open .menu-content{
	transform: translate3d(calc(100% - 70px), 0px, 0px) !important;
}
5 Likes
8

thanks mikel_dev , i have question if i have right menu how apply this ?

9

transform: translate3d(-150px, 0px, 0px) !important;

Change it the x translation to minus :slight_smile:

10

For change the size, the best way is send width to the directive.

Example:

<ion-side-menu side="left" width="335">
     ...
     ...
</ion-side-menu>
11

Guys hi, i have some problems. I create menu on left side and created on right side. When i open menu right and clicked to some buttons that calls ion view and imidiatly opened menu left. Please help me, how i can fixed to view ? Thank you!

12

variables.scss

$menu-width: 200px;

See the doc: http://ionicframework.com/docs/api/components/menu/Menu/

3 Likes
13

This is programming my friend, you can do anything.
Throw in some style; fix it up. :slight_smile:

Regards,
Neonic1

14

In Ionic5 we can overwrite below css for side-pane

ion-split-pane {
  --side-min-width: 270px; //Update this as per your requirements
  --side-max-width: 18%;
}

Hope this will help others who all searching for custom side-menu width.

1 Like