Fixed - I had to add a z-index to the form.
When I click on the user-mobile-search it shouldn't close as I have added e.stopPropagation, however it continues to close it. I don't understand why.
html:
<form class="user-mobile-search">
<input type="search" placeholder="Search Meeu">
<i class="user-mobile-search-icon icon-search"></i>
</form>
js:
mobileSearchBtn.on('click', function(e) {
e.stopPropagation();
userNav.toggleClass('open');
mobileSearchForm.toggleClass('open');
mobileSearchBtn.toggleClass('active');
});
$('body').on('click',function() {
userNav.removeClass('open');
mobileSearchForm.removeClass('open');
mobileSearchBtn.removeClass('active');
});