Custom menu on mobile

[Johani (Joe)]

Focusing on the </head> section here:

Wrapping the code in a $( document ).ready() function made it work for me:

Here’s what </head> code for that looks like:

<script type="text/discourse-plugin" version="0.8.18">

$(document).ready(function() {
	function click_outside(selector) {
		$(selector).on("click", function(e) {
			e.stopPropagation();
		});
		console.log("Click Outside initialized for " + selector);
		$("html").click(function(event) {
			if ($(selector).hasClass("active")) {
				console.log("clicked outside");
				$(selector).fadeOut(200, function() {
					$(selector).removeClass("active");
				});
			}
		});
	}

	$("#mobile-menu").addClass("visible");
	$("html").click(function(event) {
		if ($(".background").hasClass("active")) {
			$("#mobile-menu").toggleClass("active");
			$(".background").toggleClass("active");
			$(".dropdown").toggleClass("active");
			$("body").toggleClass("overflowMobile");
		}
	});

	$(".background").click(function(event) {
		event.stopPropagation();
	});

	$("#mobile-menu").click(function(event) {
		$(this).toggleClass("active");
		$(".background").toggleClass("active");
		$("body").toggleClass("overflowMobile");
		event.stopPropagation();
	});

	$(function() {
		$('#menu a[href^="/' + location.pathname.split("/")[1] + '"]').addClass(
			"active"
		);
	});
});

</script>

You have to figure out what selector actually is to make the click outside function work as well.