Build an Apple Mobile Menu for your WordPress Website - Elementor Tutorial

Hi Imran,

Would it be possible to add this to a page instead of creating it as a template?

Hi Everyone, I saw some people here having problems with the Menu not being visible when scrolling down the screen.
In the first block of code you should change Position to Fixed. Add another line Width:100% this code solved the same problem i was facing.

Imran, i still want to thank you for this amazing video! it really helpen me out a lot. I love your tutorials! Keep up the good work :)

You are a star, thank you!

i am having issue with the back button kindly help

Nice work out there. Is this same mobile menu visible on desktop? This is cool

hi Imran,
First of all thanks a lot for all the work and the code.

The only issue what i am facing is that if u open the menu and u scroll down u can see the normal website. is there a way not have a maximal scroll when u open the menu?

thanks a lot

Heads up ... if you have a sticky top header ... you'll need to make the menu containers sticky too otherwise when you scroll down the page the containers are all the way at the top.

Amazing. Am hoping it will pass multiple device testing as this is exactly what I have been looking for. A site I am making has a lot of services and the usual dropdown just wouldn't cut it for the mobile navigation.

Link_close_sub_ipad is not doing anything. Dont know why :(

Guys can you help me maybe? Do i need another container for the two icons in the "ipad menu"? For me the two icons and the text is now in one row. Don't know how to wrap it right at the second icon.

cool :)
great job

I already have a header template for desktop and if i add a second one, then it disables my first

Waited for this one! I was wondering why noone is making videos about a mega menu version for mobile. I think many people will need this.

Thanks so much, This is fantastic!!

Hi Imran, I really like your Work. This is so brilliant. In my particular case i wanted to open the menu from the bottom of the screen. So i fixed my Main Menu „ID - Link_open“ Vertcial bottom. But then every time i am in the middle of the page (so i scrolled) and then want to open the menu, it s not there. So the first opend layer sticks to the top. Do you have a solution for that?

Very good work Imran 😍

Hey man!

I'm having an issue getting the two icons to line up at the top can you help me with how to get the two items at the top then to show the text underneath it?

Am I missing something?

Great vid by the way!

Awesome!!

🤩 when you need something and it appers

Won't having so many containers affect performance?

Imran, This was great! this took me a min to implement but everything is on point. I wanted to share this update to the code. I was a bit annoyed when the menu containers would open I still had the ability to scroll down the page. I tried to use overflow hidden option in elementor for each menu container but it did not work. Disclaimer I am not a code writer or claim to be, but using chat gpt I have updated your code so that when any menu is open, the ability to scroll is disabled. It works for me. If anyone is wants this option, copy and paste below code. You will still have to use the naming conventions that Imran refers to in the video to make it your own. The only changes that i could see are /*Hide scrollbar*/ code in the style, and line 26 of the original code adding : document.body.classList.toggle('menu-open', show); // Add 'menu-open' class to body.

<style>
/* Apply styles to any element whose ID starts with 'Menu' */
[id^='Menu'] {
opacity: 0; /* Start invisible */
display: none; /* Ensure it doesn't take up space when not visible */
position: absolute; /* Use absolute positioning */
top: 0; /* Adjust top as necessary */
left: 0; /* Adjust left as necessary */
z-index: 9999; /* Ensure it's above other content */
}

/* Apply pointer cursor to any element whose ID starts with 'Icon' or 'Link' */
[id^='Icon'], [id^='Link'] {
cursor: pointer;
}

/* Hide scrollbar */
body.menu-open {
overflow: hidden;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
// Function to toggle visibility for a specific element by ID
function toggleVisibility(elementId, show) {
var element = document.getElementById(elementId);
if (element) {
element.style.display = show ? 'flex' : 'none';
element.style.opacity = show ? '1' : '0';
document.body.classList.toggle('menu-open', show); // Add 'menu-open' class to body
}
}

// Function to close all elements starting with 'Menu'
function closeAllMenus() {
document.querySelectorAll("[id^='Menu']").forEach(function(menu) {
menu.style.display = 'none';
menu.style.opacity = '0';
document.body.classList.remove('menu-open'); // Remove 'menu-open' class from body
});
}

// Show Menu_main when Link_open is clicked
document.getElementById('Link_open').addEventListener('click', function() {
toggleVisibility('Menu_main', true);
});

// Adapted to handle any ID beginning with Link_close_all to close all menus
document.querySelectorAll("[id^='Link_close_all']").forEach(function(btn) {
btn.addEventListener('click', function() {
closeAllMenus();
});
});

// Show Menu_ipad when Link_open_ipad is clicked
document.getElementById('Link_open_ipad').addEventListener('click', function() {
toggleVisibility('Menu_ipad', true);
});

// Show Menu_iphone when Link_open_iphone is clicked
document.getElementById('Link_open_iphone').addEventListener('click', function() {
toggleVisibility('Menu_iphone', true);
});

// Setup for any click on IDs starting with Link_close_sub to show only Menu_main
document.querySelectorAll("[id^='Link_close_sub']").forEach(function(link) {
link.addEventListener('click', function() {
closeAllMenus(); // First, close all menus
toggleVisibility('Menu_main', true); // Then, show Menu_main
});
});
});
</script>

Truly good work!!!

Love this!!!!!!

I liked it so much, i made some additional fade transitions. For everyone who like to copy and try out, here is what i changed:

The CSS part:

[id^='Menu'] {
/* ... */
visibility: hidden; /* Changed from display: none; to visibility: hidden; */
/* ... */
transition: opacity 0.5s, visibility 0.5s; /* Added this line for transitions */
}

The Java part:

function toggleVisibility(elementId, show) {
var element = document.getElementById(elementId);
if (element) {
element.style.visibility = show ? 'visible' : 'hidden'; // Changed from display to visibility
element.style.opacity = show ? '1' : '0';
}
}

function closeAllMenus() {
document.querySelectorAll("[id^='Menu']").forEach(function(menu) {
menu.style.visibility = 'hidden'; // Changed from display to visibility
menu.style.opacity = '0';
});
}

mhhm i encounter one misterious failure... for the chevron and close_all_sub , it does not go back to main menu scratching my head

I need the journey details, i wana know how to use chatGPT like that😁😁😁.
Great video btw, Thanks!

Sweet!

Thank you for your excellent explanation; that is what I was looking for!!!
However, you have left off something helpful for me: once your template is finished, how do you put it online? Obviously, it is necessary to substitute the standard WordPress menu for this one. I understand it may be something easy, but I need a little help to do this.

Thanks so much master Imran, but i have a question, if we do that, Does it add too much loading and code redundancy?

How can we make an Apple desktop menu?

These tuts just keep getting better and better.

Hello.
Question: with so many containers on the page, how much does the site speed decrease?
As far as I understand, in addition to speed, it also affects the DOM.

Can we make it for Bricks Builder too?

That made my brain hurt, but I got there in the end... and it works really well. Thanks, Imran.

Really surprised they both have far left justified text, especially when most people are right handed which is just more ‘work’ for all to reach. Really should be centered which is how I always setup.

It’s really sad that the elementor menu widget is just crap for real …

Imran, this vid was a lot of work! Well done, and elegant approach. This will help me clean up the messy navigation on the site I manage. Thank you.

Very nice discovery and sharing of this effect 👍🏻

This is awesome, Imran! Thanks for sharing 😀

Thank you for this video.. Genius.. Long time listener / learner... You are absolutely pushing me closer to paid subscriber if your paid content is this good. I think you have already given me a education for free worth what ever the cost of your course is.

Thanks for doing so much work on this. A bit complicated for non pros yet with your video I think it can be done since you did the code behind. Really fantastic what you do for all of us.

Thank you so much. Very cool approach!

Thank u so much. What about SEO for menu? Thank u again👍🏻🙏

This looks great and I'm going to try and implement it in my site, which currently uses pop ups. One question, I saw that you used H2 for your headers. Is this the HTML tag that you recommend to use for each menu item or should I use H3 for the sub menu?

Thanks a lot! I've always wanted to know how to make these types of menus in elementor

Awesomeee

That's brilliant, Imran.
I love that you're including code more and more in your tutorials.

Imran!! This is exactly what I’ve been needing for soooo long!! I can’t wait to try and build this menu. Thank you so much for this video!! 🥳

Nicky