<header class=“site-header px-responsive”>

<div class="mt2 wrap">
    <nav class="">
      {% include navigation.html %}
    </nav>
</div>

</header>

<div class=“menu-btn”>

<span class="menu-line"></span>
<span class="menu-line"></span>
<span class="menu-text">Menu</span>

</div>

<div class=“home-btn” onclick=“window.location.href = '/'”>

<span class="static-menu-line"></span>
<span class="home-text">Home</span>

</div>

<style> .menu-btn.show, [data-id=home] .menu-btn, .home-btn.show, .home-btn {

pointer-events: auto; /* not using this block at the moment */
opacity: 1;

} .header-title span:before, .menu-btn, .home-btn, .menu-text, .home-text, [data-id=home] .menu-btn {

position: absolute;

} .menu-btn, .home-btn {

cursor: pointer;
height: 100px;
width: 106px;
z-index: 10000;
pointer-events: auto;
top: 0;
opacity: 1;

}

.home-btn {

right: 0;

}

.home-btn > a {

position: relative;
z-index: 10000;

}

.diagonal-line {

}

.menu-line:nth-of-type(1), .menu-line:nth-of-type(2), .static-menu-line:nth-of-type(1), .static-menu-line:nth-of-type(2) {

width: 2px;
height: 85px;
top: 15%;
left: 50%;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
position: absolute;
background: #000;

}

.static-menu-line:nth-of-type(1) {

-webkit-transform: rotate(45deg);
transform: rotate(45deg);

}

data-id=home

.menu-text {

visibility: visible;

}

.menu-text, .home-text {

top: 73%;
font-size: .75em;
font-weight: Normal;
color: #000;
pointer-events: none;
visibility: visible; /* this was "hidden" */

}

.home-text { right: 22px; } .menu-text { left: 22px; }

.menu-text {

-webkit-transition: all 0.75s ease;
-moz-transition: all 0.75s ease;
-o-transition: all 0.75s ease;
-ms-transition: all 0.75s ease;
transition: all 0.75s ease;

}

.menu-btn .menu-line:nth-of-type(2) {

transform: matrix(-0.7071, 0.70711, -0.70711, -0.7071, 0, 0);
-webkit-transition: all 0.75s ease;
-moz-transition: all 0.75s ease;
-o-transition: all 0.75s ease;
-ms-transition: all 0.75s ease;
transition: all 0.75s ease;

}

</style>

<script> $( “.menu-btn” ).click(function() {

//alert($( this ).css( "transform" ));
if (  $( ".menu-line:nth-of-type(2)" ).css( "transform" ) == 'matrix(0.71934, 0.694658, -0.694658, 0.71934, 0, 0)' ){
    $(".menu-line:nth-of-type(2)").css("transform","rotate(135deg)");
    $(".menu-text").css("opacity", "1")
    $( "#main-menu" ).css("transform", "translate(0%, -116%) matrix(1, 0, 0, 1, 0, 0)")
} else {
    $(".menu-line:nth-of-type(2)").css("transform","rotate(44deg)")
    $(".menu-text").css("opacity", "0")
    $( "#main-menu" ).css("transform", "matrix(1, 0, 0, 1, 0, 0)")
}

}); </script>