CODEWITHSUNDEEP
cssionic-framework
stackdisplay
stackdisplay

Reputation: 2045

Change both menu width for ionic side menu

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

Upvotes: 4

Views: 9391

Answers (6)

RicardoVallejo
RicardoVallejo

Reputation: 1096

Put it inside :root on variables.scss

e.g.

<ion-menu menuId="mainMenu" class="mainMenu">
...
</ion-menu>

and set it like

:root {

  .mainMenu {
    --width: 100vw;
  }

  or

  ion-menu {
    --width: 100vw;
  }

}

Upvotes: 0

CodeChanger
CodeChanger

Reputation: 8351

For Ionic5 and above projects, we can overwrite the side panel's CSS like below to make it customized as per requirements.

ion-split-pane {
  --side-max-width: 18%;
  --side-min-width: 270px;
}

Put this class where you implemented your menu so it will overwrite existing CSS with this.

Upvotes: 1

user9088454
user9088454

Reputation: 1122

As people gave their answer I wish to give it mine too.

PX is good but if we add width in percentage then its works with every device. add this scss on your page.scss file

ion-menu {
  --width: 83%;
}

And the HTML does not need to give a class name or anything, you can give it if you want.

<ion-menu contentId="main-content" type="overlay"></ion-menu>

Upvotes: 0

Shankar_programmer
Shankar_programmer

Reputation: 308

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;
}

Upvotes: 3

Jayaprakash G
Jayaprakash G

Reputation: 2557

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

$menu-width: 200px;

Upvotes: 5

Divyesh Savaliya
Divyesh Savaliya

Reputation: 2740

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>

Upvotes: 0

Related Questions