Menu icon Foundation
Can the Off-Canvas width be changed with CSS?

Is it possible to change the width if the off-canvas menu? In my designs the off-canvas menu is the left column on a large screen. On mobile devices it is 'off-canvas' on the left. In Both cases it is too wide. I need it to be about 2/3rds if the default width. Just ends up with a lot of wasted space. 

I'm not doing SaSS. Haven't learned it. Don't really need it for any other purpose. 

Can I set the width of the OC menu with CSS or some other simple way?

Thanks. 

...Dale

off-canvaswidthchangecss

Is it possible to change the width if the off-canvas menu? In my designs the off-canvas menu is the left column on a large screen. On mobile devices it is 'off-canvas' on the left. In Both cases it is too wide. I need it to be about 2/3rds if the default width. Just ends up with a lot of wasted space. 

I'm not doing SaSS. Haven't learned it. Don't really need it for any other purpose. 

Can I set the width of the OC menu with CSS or some other simple way?

Thanks. 

...Dale

Rafi Benkual over 2 years ago

Yes you can - in fact any styles in Foundation can be changed in CSS - though might take more code.

In the inspector it shows the CSS here:

So you can use this selector and change the width - make sure you also change the transform amount to match as well

Dale Dietrich over 2 years ago

Thanks Rafi:

That sort-of worked. Yes it changed the width of the off-canvas menu that worked well on my iPhone, but it left a gap between the menu and the rest of the body of the page on the PC.

I gather your warning about setting the transform amount is to blame. But I don't know what to set the transform amount to. It currently is set as follows:

.position-left.reveal-for-medium {
    -ms-transform: none;
    transform: none;
    z-index: 1;
]

with the -ms-transform element struck out.

I tried to set transform to 200px (my test off-canvas-menu size) and that does nothing (other than throwup an i

ncomprehensible error message in netbeans for me.

What specifically do I set transform too? And what CSS class am I setting it in.  Sorry to sound like such a newb here. I'm learning as I'm going along.

Thanks.

Dale Dietrich over 2 years ago

OK, finally solved it.  To accomplish BOTH:

  1. changing the off-canvas size to 200px; and
  2. making this work when the off-canvas menu stays on the screen for medium-sized screens and above,

do this: 

.position-left {
  width: 200px;
}

.position-left.reveal-for-medium ~ .off-canvas-content {
  margin-left: 200px;    
}

/* ---- Down at the bottom of your CSS file with the other Media Query CSS ----- */


@media (max-width: 639px) {
  .position-left.reveal-for-medium ~ .off-canvas-content {
    margin-left: 0px;    
  }
}

....Dale

Rafi Benkual over 2 years ago

 Nice - thanks for posting back your solution! Glad you got it!