Один блок мешает другому
 

На сайте https://maxg5.ru, в мобильной версии есть кнопка меню.( См. скриншот).

По нажатию на эту кнопку должно открываться меню.

<script>
$(document).ready(function(){ 
$('.burger-btn, .x').click(function(){
$('.menu_navigation').toggleClass('openm');
});
});
</script>

Но меню не отказывается тк класс burger-btn и класс menu-open мешаю друг другу.
Если у класса burger-btn убрать position: relative;, то все нормально. Но тогда не получается выставить ровно кнопку и слово Меню.

maxg5,

.burger-btn, .x{
     z-index: 10;
 }

Спасибо!
А как сделать так что бы когда меню открыто,показввался X, а когда закрыто, показывалась кнопка.
Т.е когда меню открыто, нужно показывать класс .x, а класс .burger-btn скрывать. И наоборот при закрытом меню.
У меня вот что получилось. Но не работает скрипт.

<script>
$(document).ready(function(){ 
if($('ul#menu-mobile_menu').hasClass('openm')){
$('.burger-btn').fadeIn();
$('.x').fadeOut();
} else {
$('.x').fadeIn();
$('.burger-btn').fadeOut();
}
});
</script>

Когда меню открыто, то ul#menu-mobile_menu присваивается класс openm. Я думал как то на основе этого реализовать.

maxg5,
что у вас меню открывает, то пусть и меняет класс

В фурифоксе вообще нет никакого меню. Ну и полна консоль ошибок.

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

maxg5,
на открытие и закрытие меню нужна одна функция, в неё и нужно добавить смену классов на кнопках.