Выдвигающееся меню Bootstrap4 появляется в верхней части главной страницы

Question

Я пытаюсь создать всплывающее меню с bootstrap 4 и jquery.

Я следовал этому уроку здесь: https://bootstrapious.com/tutorial/sidebar/index3.html

И сейчас моя выглядит так ...

Не уверен, что вызывает такое поведение. Первоначально я думал, что это было <div class="wrapper"> быть в неправильном месте. Первоначально он был на внешней стороне тега body, и он не работал. Я переместил его в тело, как исходный код примера, и это, похоже, ничего не изменило ..

Вы можете увидеть мой исходный код здесь: https://www.seekadventure.net/adventureMap2.html

Answer 1

Добавьте в ваш css файл - и я думаю, что решите вашу проблему

#sidebar {
    min-width: 250px;
    max-width: 250px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: -250px;
    z-index: 99999;
    background: #ffc107;
    transition: all 0.3s;
    padding: 1em;
}
#sidebar.active {
    left: 0;
}
.overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    top: 0;
}