Is there a proper way to keep your sidebar fixed at all times for larger screens?
I can’t get it working according to the instructions on some of the older posts
I’m using Ionic beta 6.
This reserves the space for the sidebar but it disappears and shows only if you toggle the sidebar.
.menu-content {
-webkit-transform: translate3d(270px, 0px, 0px) !important;
width: calc(100% - 270px) !important;
}
This is something we have not added to the framework ATM, but it’s on our roadmap.
+1 vote for this feature. something similar to expose-aside-when from Ionic 1.
But in the meantime, what would be a workaround?
This is poor mans workaround, but kind of works for overlay type of menu, if there is only one menu
app.ts
class variables:
private wide: boolean = false;
platform.ready():
{
....
this.setWidth();
this.listenToEvents();
}
body:
setWidth() {
if (this.platform.width() > 767) {
this.wide = true;
this.menuCtrl.open();
} else {
this.wide = false;
this.menuCtrl.close();
}
};
listenToEvents() {
window.addEventListener('resize', () => {
this.setWidth();
});
}
app.html
<ion-menu id="leftMenu" type="overlay" [content]="content">
...
...
<ion-content class="outer-content" [menuClose]="wide">
...
...
app.scss
@media (min-width: 768px) {
ion-page{
margin-left: 30%;
width:70%;
}
ion-menu{
width:30%;
display:block;
}
.bar-button-menutoggle {
display: none;
}
ion-menu ion-backdrop {
display:none;
}
ion-content {
border-left: none;
}
ion-menu[type=overlay] .menu-inner {
-webkit-transform: translateX(0px)!important;
transform: translateX(0px)!important;
box-shadow: none;
width:100%;
}
}This is really great! Thank you!
My setup is with a right-side menu, I am able to adjust the content correctly for this but I can’t get the menu to appear on the right side. It still remains on the left.
I tried this but it’s not putting the menu on the right side.
ion-menu[type=overlay] .menu-inner {
-webkit-transform: translateX(0px) !important;
transform: translateX(0px) !important;
box-shadow: none;
overflow:none;
width: 100%;
right: 0 !important;
left: auto !important;
}ok I think I got it! Maybe 
I have a right side menu with tabs so I change the orginal css a bit to account for that. Here is what I have in case anyone else wants to take this for a spin.
@media (min-width: 768px) {
ion-page.tabs-page.show-page {
margin-right: 30% !important;
width:70% !important;
// z-index:10 !important;
}
ion-menu {
width: 30% !important;
display:block !important;
z-index:10;
right: 0 !important;
left: auto !important;
}
.bar-button-menutoggle {
display: none;
}
ion-menu ion-backdrop {
width:0px;
display:none;
z-index:10;
opacity: 0;
}
ion-content {
border-left: none;
border-left-color: transparent;
}
ion-menu[type=overlay] .menu-inner {
-webkit-transform: translateX(0px) !important;
transform: translateX(0px) !important;
box-shadow: none;
overflow:none;
width:100%;
}
}Nice, glad i could help. Hopefully devs will provide proper solution soon 
+1 This will be great to have
+1 for this feature in Ionic 2
Some news about this feature?
Any further on this?
Is it still ‘on the roadmap’ ?
+1 for this feature in ionic2
+1 for this feature in ionic
+1 for this feature in ionic
This feature is being tracked here, add a like there if you are interested https://github.com/driftyco/ionic/issues/6793
This works for me as well with some little bit modifications.
instead of ion-page >
ion-content, ion-footer, ion-header{
margin-left: 20%;
width:80%;
}