更改基礎菜單畫布的寬度

Question

我正在使用框架基礎並且非常有用。
我想知道如何更改畫布菜單的寬度。
使用escusicamente css。
感謝

Answer 1

如果您使用的是SCSS版本基金會是在你settings.scss文件改變$off-canvas-width: rem-calc(250);一樣容易。

如果您使用的是css，您需要更改寬度.left-off-canvas-menu和.move-right > .inner-wraptransform。 我建議你添加一個新的類來.left-off-canvas-menu和off-canvas-wrap，像<div class="my-site off-canvas-wrap" data-offcanvas>和<div class="my-site left-off-canvas-menu>覆蓋特異性

然後CSS：

.my-site.move-right > .inner-wrap { 
    webkit-transform: translate3d(newwidth, 0, 0); 
    -moz-transform: translate3d(newwidth, 0, 0); 
    -ms-transform: translate3d(newwidth, 0, 0); 
    -o-transform: translate3d(newwidth, 0, 0); 
    transform: translate3d(newwidth, 0, 0); 
} 

和

.my-site.left-off-canvas-menu { 
    width: newwidth; 
} 

Answer 2

對於基金會6，我用了以下代碼來更改畫布外菜單的寬度（使用變量）：

$offcanvas-right-size: 315px; 

.is-open-right { 
    -webkit-transform: translateX(-$offcanvas-right-size); 
    -ms-transform: translateX(-$offcanvas-right-size); 
    transform: translateX(-$offcanvas-right-size); 
} 

.off-canvas.position-right { 
    width: $offcanvas-right-size; 
    right: -$offcanvas-right-size; 
} 

我有左和右菜單，想要更小的權利。

Answer 3

上除了上述的答案（代表塊註釋功能） 還與基座6

事情李忘了地址是第二個div嵌套到斷開畫布位置左帆布製成至少在我的代碼 第一類是關閉的帆布菜單的大小和第二還要移動內容

.is-open-left { 
-webkit-transform: translateX(125px); 
-ms-transform: translateX(125px); 
transform: translateX(125px); 
} 



.off-canvas-menu{ 
padding-left:125px; 
}