Как создать наложенное меню навигации на экранах мобильных устройств, имея при этом обычную панель навигации на обычных ⇐ CSS

[Anonymous]

Я хочу создать собственное полноэкранное наложенное меню навигации, но у меня возникли некоторые проблемы. Я хочу, чтобы оверлей находился под моим преобразованным гамбургер-меню и скрывал все остальное на веб-странице.
Это последнее, к чему я могу откатиться — https://divided7.github.io/saylus (открыть в мобильном представлении). Пожалуйста, помогите мне в этом. Я использую jQuery для переключения состояния гамбургер-меню:
jQuery

Код: Выделить всё

$("#mobile-menu").click(function () {
$(".icon").toggleClass("close");
var x = document.getElementsByClassName("overlay")[0];
if ($(".icon").hasClass("close")) {
x.style.display = "block";
$("body").addClass("modal-open");
} else {
x.style.display = "none";
$("body").removeClass("modal-open");
}
});

CSS

Код: Выделить всё

  .overlay {
height: 100vh;
width: 100%;
margin: 0px;
display: none;
overflow: hidden;
}

Ожидаемый результат:


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

Подробнее здесь: https://stackoverflow.com/questions/617 ... ng-a-norma