I am trying to make a custom menu on mobile for my forum. In fact, this is a menu that someone else has on his forum and I asked for his codes but something is missing, don’t know what! Probably in JS… This is what it supposed to be : Before : [Before] After : [After] Code in : 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"); }); CSS : #mobile-menu{ z-index: 5000; border: 1px #f9f9f9 solid; position: fixed; width: 50px; height: 50px; bottom:20px; left:20px; border-radius: 150px; background-color: #fff; box-shadow: 0px 5px 5px #888; box-shadow: 0px 5px 5px rgba(0,0,0,0.4); cursor: pointer; -webkit-transition: .25s ease-out; -moz-transition: .25s ease-out; -o-transition: .25s ease-out; transition: .25s ease-out; } #mobile-menu.visible{ visibility: visible; opacity:1; } #mobile-menu:hover{ box-shadow: 0px 3px 3px #666; box-shadow: 0px 3px 3px rgba(0,0,0,0.6); bottom:15px; left:15px; width: 60px; height: 60px; } #mobile-menu:hover:after{ top: 15px; font-size: 21px; color:#888; } #mobile-menu:after{ content: "\f0c9"; font-family: 'FontAwesome'; color: #4a5659; position: relative; top: 11px; font-size: 19px; text-align: center; display: block; -webkit-transition: .25s ease-out; -moz-transition: .25s ease-out; -o-transition: .25s ease-out; transition: .25s ease-out; } #mobile-menu.active{ box-shadow: none; border-radius: 0px; } #mobile-menu.active:after{ content:"\f00d"; } .background{ z-index: 10; position: fixed; width:100%; height:100%; background-color: #fff; border-radius: 0px; box-shadow: none; bottom:0px; left:0px; visibility: hidden; opacity: 0; overflow: auto; transition: visibility 0s, opacity 0.5s linear; -webkit-transition: .25s ease-out; -moz-transition: .25s ease-out; -o-transition: .25s ease-out; transition: .25s ease-out; } .background.active{ visibility:visible; opacity: 1; bottom:0px; } .background a, .background a i{ transition: visibility 0s, opacity 0.5s linear; -webkit-transition: .25s ease-out; -moz-transition: .25s ease-out; -o-transition: .25s ease-out; transition: .25s ease-out; } .background a i{ visibility: hidden; opacity: 0; } .background a{ display: block; padding:10px 0; color:#444; font-size: 22px; font-family: "Open Sans"; font-weight: 300; } .background a:hover{ color: #111; } .background a:hover i{ visibility:visible; opacity: 1; } .background a i{ margin-left: 15px; } .background a{ font-size:16px; } .background h2{ font-size: 22px; font-family: "Open Sans"; color:#444; } .background h1{ font-size: 28px; } .background a i{ visibility: visible; opacity: 0.7; left: 0px; position: relative; float: left; margin-right: 15px; top:3px; width: 20px; text-align: center; } @media (max-width: 768px) { .background{ padding-bottom: 85px; } #mobile-menu{ bottom: 25px; left:calc(50% - 25px); } #mobile-menu:hover{ left:calc(50% - 30px); bottom: 20px; } #mobile-menu:hover:after{ top: 16px; font-size: 21px; color:#888; } .overflowMobile{ overflow-x: hidden; overflow-y: hidden; } } @media (min-width: 769px) { .background{ height: 550px; width: 350px; overflow: hidden; bottom: 0px; left: 0px; box-shadow: 0px 0px 0px #999; box-shadow: 0px 0px 0px rgba(0,0,0,0); } .background.active{ overflow: hidden; bottom: 15px; left: 15px; box-shadow: 0px 5px 5px #666; box-shadow: 0px 5px 5px rgba(0,0,0,0.3); } } HTML : Qu'aimerais-tu faire? Aller sur la communauté Voir nos formations S'inscrire au webinaire Lire le blogue Voir vos factures

Focusing on the section here: Wrapping the code in a $( document ).ready() function made it work for me: [5f161d22-a513-43cf-83ca-ced128b46d36] Here’s what code for that looks like: $(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" ); }); }); You have to figure out what selector actually is to make the click outside function work as well.

Adam_Adam: How could you position a menu like that on to the bottom right On small screens, there wouldn’t be much difference because the button / menu is centered, On tablets you would use the stuff from above but just flip the left properties to right If you are not sure what I mean, you can also just add this at the bottom of the code above: #mobile-menu { left: unset; right: 20px; &:hover { left: unset; right: 15px; } } @media (min-width: 769px) { .background { left: unset; right: 0; &.active { left: unset; right: 15px; } } } To get this: [75e8889d-8bb4-42ef-82c7-a0cdd74a59c6] Adam_Adam: and have it a little transparent You can use an RGBA color as the background for the class background like so: .background { background-color: rgba(255,255,255, .7); }

Custom menu on mobile

Product Support

Mittineague (Mittineague) March 11, 2018, 7:52pm 2

Are you relying on Bootstrap magic? i.e.
<div class="col-md-12">

AFAIK, Discourse does not have Bootstrap so those class attribute values are superfluous and if you are expecting them to get a particular style applied they won’t.

Topic		Replies	Views
Mobile Brand Header invisible? Development css , brand-header	3	122	March 26, 2018
Mobile menu closing backdrop not prevent the clicking on the element under that when animation disabled on device UX mobile , sidebar , user-menu	0	95	July 17, 2024
Why does clicking latest at top of mobile open a menu at the bottom UX mobile	22	844	February 27, 2025
Usermenu revamped mobile repositioning UX	2	338	January 18, 2024
Hamburger menu not showing on mobile? Product Support	12	1406	April 9, 2022

Custom menu on mobile

Related topics