Как реализовать мобильное меню на рабочем столе

Question

Итак, у меня есть:

<div class="module left site-title-container">
    <?PHP 
       shapely_get_header_logo(); 
    ?>
</div>
<div class="module widget-handle mobile-toggle right visible-sm visible-xs"> 
  <i class="fa fa-bars"</i>

Который я изменил на

<div class="module left site-title-container">
    <?php 
        shapely_get_header_logo();
    ?>
</div>
<div class="module widget-handle mobile-toggle right visible-sm visible-xs"> 
    <a id="mobile-nav" href="#">
        <div class="container1" onclick="myFunction(this)">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
        </div>
    </a> 
<script>
    function myFunction(x){
        x.classList.toggle('change');
    }
</script>

Css

.container {
    display: inline-block;
    cursor: pointer;
}
.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}
.change .bar1 {
-webkit-transform: 
rotate(-45deg) 
    translate(-9px, 6px);
    transform: rotate(-45deg) 
    translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: 
rotate(45deg) 
    translate(-8px, -8px);
    transform: rotate(45deg) 
    translate(-8px, -8px);
}

Это прекрасно работает на мобильном но не уверен, как реализовать на рабочем столе. Я показываю мобильное меню на рабочем столе примерно так:

<header id="masthead" class="site-header<?php echo get_theme_mod( 'mobile_menu_on_desktop', true ) ? ' mobile-menu' : ''; ?>" role="banner">
    <div class="nav-container">

, но, тем не менее, оно не отображается ...

Так как мне реализовать вышеупомянутую анимацию строк меню на рабочем столе? Это просто случай изменения a id?

Что-то есть на рабочем столе, но кажется, что оно скрыто, так как, когда я щелкаю, где должны быть строки меню, меню реагирует, но панели фактически не видны ,