How to implement mobile menu on desktop - php

Question

So I have:
<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>
Which I changed to
<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);
}
This works fine on mobilebut not sure how to implement on desktop. I have show mobile menu on desktop like so:
<header id="masthead" class="site-header<?php echo get_theme_mod( 'mobile_menu_on_desktop', true ) ? ' mobile-menu' : ''; ?>" role="banner">
<div class="nav-container">
but still, it's not showing...
So how do I implement the above menu bars animation on desktop? Is it just a case of changing the a id?
Something is there on desktop but it seems to be hidden as, when I click where the menu bars should be, the menu responds but no bars are actually visible.