Skip to content

Instantly share code, notes, and snippets.

@nextab
Last active March 15, 2021 15:26
Show Gist options
  • Save nextab/454e21bb503f2e181a374e54d286277b to your computer and use it in GitHub Desktop.
Save nextab/454e21bb503f2e181a374e54d286277b to your computer and use it in GitHub Desktop.
This snippet (which goes into your functions.php) allows you to apply styles after someone clicked on the mobile menu (e.g. change the background color of the header).
// This snippet adds an event Listener to the mobile nav menu and if someone opens it, the body tag will receive the additional class "mobile_nav-opened".
function nxt_header_js_code() {
?>
<script>
const mob_nav = document.getElementsByClassName('mobile_nav')[0];
// console.log(mob_nav);
mob_nav.addEventListener('click', function() {
document.getElementsByTagName('body')[0].classList.toggle('mobile_nav-opened');
});
</script>
<?php
}
add_action('wp_footer', 'nxt_header_js_code');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment