Can I change the width of Side menu with css?

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

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

Example here

Documentation here

1 Like

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

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

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

Yes it is possible, with !important word in the CSS:{
	width: calc(100% - 70px) !important;
.menu-open .menu-content{
	transform: translate3d(calc(100% - 70px), 0px, 0px) !important;

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

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

Change it the x translation to minus :slight_smile:

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


<ion-side-menu side="left" width="335">

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!


$menu-width: 200px;

See the doc:


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


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.