Изменить ширину меню холста основы

Question

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

Answer 1

Если вы используете scss версию Foundation, это так же просто, как изменить $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

Для Foundation 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;
}