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

Для этого необходимо сделать 2 вещи:
1) блок, содержащий в себе меню, должен быть фиксированным на всю ширину и высоту экрана, с наибольшим показателем z-index'a. То есть что-то типа такого:

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 10000;

2) При вызове меню на body повесить overflow: hidden, чтобы оно не скроллилось. Можно сделать путём добавления с помощью js нужного класса.

Блок меню, по клику добавляется css классик с position: fixed; top: 0; left: 0; overflow: auto; width: 100vw; height: 100vh; z-index: 999. И не забудьте иконку закрытия на нем, по клику, убирающую этот классик и со e.stopPropagation() в коллбэке.