0
X
Add Snippet To Project
New Project
Add To Existing Project
<?php
add_action(
'tgwc_before_account_navigation',
function() {
?>
<script>
jQuery( document ).ready( function( $ ) {
$( '.tgwc-nav-toggle-btn' ).on( 'click', function( e ) {
e.preventDefault();
$( this ).toggleClass( 'open' );
$( '.tgwc-woocommerce-MyAccount-navigation' ).toggleClass( 'open' );
} );
} );
</script>
<style>
.tgwc-nav-toggle-btn {
display: none;
}
.tgwc-nav-toggle-btn .open {
display: inline-block;
}
.tgwc-nav-toggle-btn .close {
display: none;
}
.tgwc-nav-toggle-btn.open .close {
display: inline-block;
}
.tgwc-nav-toggle-btn.open .open {
display: none;
}
@media (max-width: 767px) {
.tgwc-nav-toggle-btn {
display: inline-block;
}
.tgwc-woocommerce-MyAccount-navigation {
left: 0;
position: absolute !important;
right: 0;
top: 38px;
background: #10141F;
z-index: 1;
display: none;
}
.tgwc-woocommerce-MyAccount-navigation.open {
display: block;
}
}
#tgwc-woocommerce {
position: relative;
}
</style>
<button class="tgwc-nav-toggle-btn" style="max-width: 40px;">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" class="open" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5"></rect><rect x="4" y="15" width="16" height="1.5"></rect></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="close" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>
</button>
<?php
},
);
