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 ??


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

Example here

Documentation here


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.


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: