Как мобильное меню bootstrap научить открываться справа?

Question

[ligisayan]

Есть меню bootstrap 4 в мобильной версии которого хочу открывать меню не стандартно сверху, а оно должно выезжать справа с перекрытием контента как здесь

Есть для этого примера инструкция для подключения библиотеки Off-canvas специально для Bootstrap 4, делаю все по ней, но почему-то не работает.. Что не так?

Код и фидл

Answer 1

[Сергей delphinpro]

.menu {
  position: fixed;
  left: 0;
  top: 0;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  
  &.isOpen {
    transform: translateX(0);
  }
}

Непонятно, зачем здесь бутстрап приплетать.

Comments

[ligisayan]

Сергей delphinpro не понял вашего ответа или оно абстрактное, не относящееся к конкретному фидлу?

Непонятно, зачем здесь бутстрап приплетать.

Ну у меня весь сайт построен на бутстрапе, логично, что на его основе я хочу получить решение, чтобы все не перекраивать для этого

[Сергей delphinpro]

ligisayan, зачем перекраивать-то?
Просто делаете меню.
вот пример, написан за пять минут.
еще минут десять потратить, чтобы отшлифовать:

[ligisayan]

Сергей delphinpro, спасибо, но я немножко не про то спрашивал. В бутстрапе уже изначально заложена адаптивность и расположение пунктов меню, так как меня устраивает + интересовался почему на демо странице по инструкции работает, а у меня нет, т.к. найти причину - это большой плюс в опыт разобрать какие-то моменты

Answer 2

[ligisayan]

Решение в том, что нужно было добавить еще кусочек кода

<div class="bsnav-mobile">
    <div class="bsnav-mobile-overlay"></div>
    <div class="navbar"></div>
  </div>

и стили для него