Изменение ширины меню холста фонда

Question

Я использую основу рамки и очень полезен.
Я хотел знать, как вы можете изменить ширину меню холста.
Используйте escusicamente css.
Спасибо

Answer 1

Если вы используете версию SCSS фонда, это так же просто, как изменение $off-canvas-width: rem-calc(250); в файле settings.scss.

Если вы используете 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

На дополнение к ответу выше (Rep блоки комментариев функцию) также с фундаментом 6

Дело Ли забыл адрес является то, что второй DIV вложен в офф-холст позиции левого холст, по крайней мере, в моем коде Первый класс для размера меню вне холста, а второго также переместить содержимое

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



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