Change both menu width for ionic side menu

ion-menu
ionic 3 side menu tutorial
ion-menu-button
ionic side menu template
ionic popup menu
set ion menu width
split pane side not ion menu
ion-split-pane width

I have left and right ionic side menu, which i want to change both the menu width. I have successfully change the left menu width as shown below but i am not sure how to change the right menu width. Currently, the left menu width change but when right menu is being toggle, the right menu content is distorted.

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

Codepen Link

Just add the "menu-width" in variables.scss

$menu-width: 200px;

Can I change the width of Side menu with css?, The Menu component is a navigation drawer that slides in from the side of the however the display type can be changed to any of the available menu types. 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

Use a class name to change the width of the side menu.

<ion-menu class="custom" side="end" menuId="first">
</ion-menu>

In CSS you can use like below.

.custom {
  --width: 500px;
}

ion-menu, When you first run the command ionic start myApp sidemenu , the default Open the HTML file and replace everything between the tags with . I prefer using SVGs in PWAs because of their size on the disk, ability to scale� The Menu component is a navigation drawer that slides in from the side of the current view. By default, it slides in from the left, but the side can be overridden. The menu will be displayed differently based on the mode, however the display type can be changed to any of the available menu types.

According to this just add width attribute in ion-side-menu element.

Ionic docs for sidemenu is here

<ion-side-menu
       side="left"
       width="500">
</ion-side-menu>

How To Create A Prettier Ionic Side Menu, Ionic - JavaScript Side Menu - Side menu is one of the most used Ionic components. The Side menu can be opened by swiping to the left or right or by triggering the We can change this number value or we can set it to false to enable swiping with a false value will disable the side menu, and the width attribute value is a� I would like to set the menu width to e.g. 20 px so I could have a list similar to page dividers: A B C etc, Is that possible with the current version? If so, how? Ionic info: (run ionic info from a terminal/cmd prompt and paste output below): insert the output from ionic info here Cordova CLI: 6.5.0 Ionic Framework Version: 2.2.0 Ionic CLI

Ionic - JavaScript Side Menu, --width variable works for ion-menu to adjust the width of side menu. Same should be used for adjusting the width of the menu with split pane� The ion-menu with side="start" will create a side menu that starts from left to right, ion-title will create a title for the pages in the side menu. Also, don’t forget to add the attribute contentId which the id the menu should use.

Ion-menu width size is not adjustable with split-pane visible � Issue , In this tutorial we'll take a look a the ionic side menu and break it down a menu on both sides, we could have a ion-side-menu for each side. One additional thing to note is that we can change the behavior of the sidemenu to always width is less than 768px, it will act as a normal slide-out side menu. .split-pane-md.split-pane-visible>.split-pane-side { min-width: 270px; max-width: 28%; border-right: var(--border); border-left: 0; } Expected Behavior--width variable works for ion-menu to adjust the width of side menu. Same should be used for adjusting the width of the menu with split pane visible.

Understanding Ionic's Side Menu, user-scalable=no, width=device-width" /> <title>Ionic Framework Example</ title> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/ >� ion-side-menus contains the menu and main content both. ion-side-menu-content contains the main content of the application. ion-header-bar creates header part. Header has the button with “burger icon” and the attribute directive menu-toggle=”left” which binds the menu toggle left functionality.

Comments
  • Anyone been able to get this to work with --max-width? Just --width seems to be working though, and can use a css expression with it like --width: max(90vw, 500px) to good effect
  • It does not work. Changing width attribute only changes the swipe position of the side menu but the side-menu-content width still remain the same. 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.