Hiding responsive nav menu on click...

Apr 26th, 2018 at 06:17 AM
User 2073960 Photo

xtom
Registered User
28 posts

So I'm using the code below in the footer code section to hide a responsive nav menu when you click anywhere except the menu icon and so far it works great on mobile view. But I don't want it to hide the same responsive menu on the wider views. So how could I run or apply this script to the menu when it is in mobile view only. Or is there a better way to do this? I've been following the tutorial here https://www.coffeecup.com/help/articles … m-scratch/

<script>
// hide nav menu on click
$(document).ready(function() {
$(document).click(function(e) {
if(!$(e.target).is('.coffeecup-icons-menu7')) {
$('#nav-menu').hide();
}
});
});
</script>
Apr 26th, 2018 at 09:26 AM
User 2073960 Photo

xtom
Registered User
28 posts

Ok managed to get this working by checking if document.documentElement.clientWidth < 620

<script>
// hide nav menu on click
$(document).ready(function() {
$(document).click(function(e) {
if(!$(e.target).is('.coffeecup-icons-menu7') && document.documentElement.clientWidth < 620) {
$('#nav-menu').hide();
}
});
});
</script>

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.