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 :)
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.
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'; }); }
@@Alex-nn4qz All he did was update the code you put into the html widget. Here is the full code including aequitas' updates: /* Apply styles to any element whose ID starts with 'Menu' */ [id^='Menu'] { opacity: 0; /* Start invisible */ visibility: hidden; /* Changed from display: none to visibility: hidden */ 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 */ transition: opacity 0.5s, visibility 0.5s; /* Added this line for transitions */ } /* Apply pointer cursor to any element whose ID starts with 'Icon' or 'Link' */ [id^='Icon'], [id^='Link'] { cursor: pointer; } 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.visibility = show ? 'visible' : 'hidden'; // Changed from display to visibility element.style.opacity = show ? '1' : '0'; } } // Function to close all elements starting with 'Menu' function closeAllMenus() { document.querySelectorAll("[id^='Menu']").forEach(function(menu) { menu.style.visibility = 'hidden'; // Changed from display to visibility menu.style.opacity = '0'; }); } // 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 }); }); });
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.
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.
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.
love it and the last bit to finalize my own page was exactly a new menu. I like it as a second option also for desktop user, however adding transition and colour change on hover over ofc. For those who like as well, change as you want: .mainmenu { background: linear-gradient(to bottom, rgba(65,44,109,1) 0%, #212039 100%) } .heading h2 { color: #FDFCFB; /* Main color */ } .mainmenu:hover .heading h2:hover { transition: all 0.4s ease-in-out; color: #D4145A; /* Color on hover */ }
Hi Imran. I would like to combine this menu with your latest video on how you created the new course (displaying one container at a time). Is it possible to use this menu and have the links in it show certain containers? Thanks 🙏🏼
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. /* 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; } 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 }); }); });
Worked so well!!! But I am little struggeling. How can I get the opened menu to stick on the screen? When scrolling down, it stays at the top and you can see the content below
Very good video. I just have problems with the fact that there is no overlay under the menu, as my menu has so much content that you have to scroll through the menu and when you reach the end of the menu, you scroll further on the page. Is it possible to make the page below the active menu not scroll or that the menu stops when you reach the end of it, or create an overlay on the page below? (vh is already set to 100)
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.
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?
Nope. It's in the header and the containers are set to Display: None, thus not taking up space until they become Display: Flex. If they were just opacity 0, then they'd still be present (even when invisible) but Display: none removes them :)
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.
@@websquadron For real you found a solution I've been looking for, for a long time. Your becoming one of my favorite content producers. Keep it up brother!!
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!
Hey, It's like all three are on the same line if that makes sense? What I've done for now is just keep everything as a one icon type of container just to bypass it for now
@RyanKimber I had the same issue and its an easy to understand question. Solution: The Text will wrap around if you give it a width of 100%. You can do that in the advanced section of the text you placed.
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?
Ok i found a solution :D. When i check the position fixed directly in elementor on each container it does not effect properly but when i set custom css on each container for example „ID - Menu_main“ -> Custom CSS „selector { position: fixed; }“ Than it works fine. Thanks to @EricJGerber i got even rid of the scroll bars. So now its almost perfect for me :)
At 7:50 I don’t understand how it can be, that under »Menu_ipad« the direction is in a row but under »Justify Content« the content is vertical (shown in the icons).
Failure 40 as we say in Denmark... one needs to make sure that there is no more submenus in the code than available on the website, the script for closing subs does not work xD
What I noticed is the close_all_sub does not work unless you have more than ONE menu to open so for example you have iPad, iPhone, Mac - it works but if you've only built iPad and testing it does not work - I spent 30mins playing around with it - kept on building and realised that was the fix!
Has anyone tried to expand the code to have sub levels containers that close them to the level before? As Imran is explaining that the Ikea Menu works. I want the sub levels to close one by one instead to go back to the main menu, but I can't make that work unfortunately
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.
@@zerobambiro you can put into another container without an issue. I had a similar issue of the back button not working, i noticed it was because I hadn't yet added in all containers mentioned in the code (I was testing as I built it). So it has an event listener for Link_open_ipad but I hadn't added that container in. So the code failed after that point as it was "listening" for something that wasn't there. As such the close icon didn't do as it should. Looking in chrome developer tools > Console pointed out the issue and helped me remedy it.
I found the solution. The container changed his width on mobile even tho it had a width of 100%. I just used this css on every menu container: selector { width: 100%!important; }
I agree. Elementor should make the standard drop down menus have the ability to operate in this way. This is so complex - especially when you need to pass the website to a client! They'll never be able to get their head around this :(
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.
This is so awesome I’m having trouble with the Link_close_sub i edited the CSS ID to Link_close_sub_about for the about sub menu but when I click on the icon nothing happens I made sure that the IDs match with everything but it still doesn’t work
@@websquadron yes the chevron icon I have it set as Link_close_sub_about and the plus icon as Link_close_all_about the plus icon works but the chevron icon doesn’t work.
@@websquadron I had a custom css in my custom code for a previous header I was working on I forgot about it I deleted it maybe that’s why it wasn’t working properly I’ll try it again. Thank you very much your channel really helps me out a lot 🤙🏾
I had a similar issue, i noticed it was because I hadn't yet added in all containers mentioned in the code (I was testing as I built it). So it has an event listener for Link_open_ipad but I hadn't added that container in. So the code failed after that point as it was "listening" for something that wasn't there. As such the close icon didn't do as it should. Looking in chrome developer tools > Console pointed out the issue and helped me remedy it.
@@andy1luckman Hey andy, did you try to make the menu sticky to the top? For me it works with the Menubar, but when i tell the containers to be sticky aswell, it moves everything to the side in a weird way.
@@zerobambiro I have a container that the hamburger icon and logo are in. I made that sticky to mobile devices using the Elementor settings in Motion Effects. I then made each individual container for the mobile menu sticky also. Works for me ... although I am still to test on multiple devices. No strange movement to the side for me, might be margin / padding in how you have built your header.
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 :)
That's brilliant, Imran.
I love that you're including code more and more in your tutorials.
I agree! Imran is brilliant i love it!
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.
:)
Main course is here: learn.websquadron.co.uk/
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';
});
}
Where did you put this code? I am looking at something to fade in and out like the apple website so this would be good to know!
can you post a json please!
@@Alex-nn4qz All he did was update the code you put into the html widget.
Here is the full code including aequitas' updates:
/* Apply styles to any element whose ID starts with 'Menu' */
[id^='Menu'] {
opacity: 0; /* Start invisible */
visibility: hidden; /* Changed from display: none to visibility: hidden */
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 */
transition: opacity 0.5s, visibility 0.5s; /* Added this line for transitions */
}
/* Apply pointer cursor to any element whose ID starts with 'Icon' or 'Link' */
[id^='Icon'], [id^='Link'] {
cursor: pointer;
}
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.visibility = show ? 'visible' : 'hidden'; // Changed from display to visibility
element.style.opacity = show ? '1' : '0';
}
}
// Function to close all elements starting with 'Menu'
function closeAllMenus() {
document.querySelectorAll("[id^='Menu']").forEach(function(menu) {
menu.style.visibility = 'hidden'; // Changed from display to visibility
menu.style.opacity = '0';
});
}
// 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
});
});
});
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.
Glad you liked it
These tuts just keep getting better and better.
Big thanks. Please do click Share and share them :)
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 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.
Once you get it down on paper with how many Containers, their name/IDs it all makes sense. Just have lots of paper handy.
All hail Imran! 😂
Buddy, you do some seriously creative stuff. This is awesome!
Thanks 😅
Thanks a lot! I've always wanted to know how to make these types of menus in elementor
No problem!
Very nice discovery and sharing of this effect 👍🏻
Many thanks
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.
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
Hope you enjoy it! Don’t forget to share :)
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.
It's in your Header Template so it will be visible.
@@websquadron Thanks!!!
Thank u so much. What about SEO for menu? Thank u again👍🏻🙏
You will still have a normal WordPress Menu that is responsively hidden.
@@websquadron
Thank u
Truly good work!!!
love it and the last bit to finalize my own page was exactly a new menu.
I like it as a second option also for desktop user, however adding transition and colour change on hover over ofc.
For those who like as well, change as you want:
.mainmenu {
background: linear-gradient(to bottom, rgba(65,44,109,1) 0%, #212039 100%)
}
.heading h2 {
color: #FDFCFB; /* Main color */
}
.mainmenu:hover .heading h2:hover {
transition: all 0.4s ease-in-out;
color: #D4145A; /* Color on hover */
}
Hi Imran. I would like to combine this menu with your latest video on how you created the new course (displaying one container at a time).
Is it possible to use this menu and have the links in it show certain containers?
Thanks 🙏🏼
Hmmmm yes.
You could do that. Click and then the other container appears.
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.
/* 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;
}
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
});
});
});
Excellent update and I love it when we can take things further.
Thank you! Why is the original code not updated yet?
You are a hero! This was my only problem.
@@websquadron please update main code because I was struggling a lot until I found this comment
@@leegaacy no problem! Happy to expand.. it was my only issue as well
Worked so well!!!
But I am little struggeling. How can I get the opened menu to stick on the screen? When scrolling down, it stays at the top and you can see the content below
Have you set it to VH 100?
Thank you so much. Very cool approach!
Big thanks :)
Very good video. I just have problems with the fact that there is no overlay under the menu, as my menu has so much content that you have to scroll through the menu and when you reach the end of the menu, you scroll further on the page.
Is it possible to make the page below the active menu not scroll or that the menu stops when you reach the end of it, or create an overlay on the page below? (vh is already set to 100)
🤩 when you need something and it appers
You are a star, thank you!
That made my brain hurt, but I got there in the end... and it works really well. Thanks, Imran.
Yup, lots to take in, but it makes sense :)
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
Not that I know of. If you set to be Full Width and Full Height then you shouldn't see the screen below.
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.
I found that the menu containers must also be offset accordingly
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?
I would use H3. The vid was more about the process and pieces :)
Thanks so much master Imran, but i have a question, if we do that, Does it add too much loading and code redundancy?
Nope. It's in the header and the containers are set to Display: None, thus not taking up space until they become Display: Flex. If they were just opacity 0, then they'd still be present (even when invisible) but Display: none removes them :)
Thanks so much@@websquadron
Very good work Imran 😍
Nice work out there. Is this same mobile menu visible on desktop? This is cool
You could modify to make it look fine on the mobile
@@websquadron I want it to display exactly like this on desktop as is it is on mobile
Love this!!!!!!
Thanks so much, This is fantastic!!
Can we make it for Bricks Builder too?
You can use the same process. The bulk of the video is about the logic in terms of IDs, etc. You can use the same HTML code :)
@@websquadron Thank you. 😀
Hi Imran,
Would it be possible to add this to a page instead of creating it as a template?
Yup :)
I need the journey details, i wana know how to use chatGPT like that😁😁😁.
Great video btw, Thanks!
I will get that recorded!
thank you @@websquadron
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.
I tested and it was fine even on a page with many containers (for the normal home page content).
The containers are set to Display None :)
Great tutorial.... You da man .
I appreciate that!
@@websquadron For real you found a solution I've been looking for, for a long time. Your becoming one of my favorite content producers. Keep it up brother!!
@@DDesigner123 Does this count as a tutorial? Honestly, I don't understand how it works and I'm currently researching it.
I already have a header template for desktop and if i add a second one, then it disables my first
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!
Is one higher than the other?
Hey,
It's like all three are on the same line if that makes sense?
What I've done for now is just keep everything as a one icon type of container just to bypass it for now
@websquadron Any help would be great!
Would need to see the site but can only support as part of a 1-2-1 learn.websquadron.co.uk/#support @@RyanKimber
@RyanKimber I had the same issue and its an easy to understand question. Solution: The Text will wrap around if you give it a width of 100%. You can do that in the advanced section of the text you placed.
Brilliant!
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?
Ok i found a solution :D. When i check the position fixed directly in elementor on each container it does not effect properly but when i set custom css on each container for example „ID - Menu_main“ -> Custom CSS „selector {
position: fixed;
}“
Than it works fine.
Thanks to @EricJGerber i got even rid of the scroll bars. So now its almost perfect for me :)
@@SteinisGrafikdesign thanks for sharing your workaround!
Does someone know how to make the hamburger icon transform into the "x"? So the same bottom opens and closes the menu
cool :)
great job
At 7:50 I don’t understand how it can be, that under »Menu_ipad« the direction is in a row but under »Justify Content« the content is vertical (shown in the icons).
It's a weird way of how the icons display and do something different.
Sweet!
Thanks!
Somewhere i made mistake i couldnt find where did i made mistake can you help me Please?
It’d have to be part of a consultation
Won't having so many containers affect performance?
Nope as I tested it and they are not displayed or taking up any space until the relevant icon is clicked
Some plain text links won't affect performance. But if you have some mega items containing images or videos, it will. And accessibility is dead
mhhm i encounter one misterious failure... for the chevron and close_all_sub , it does not go back to main menu *scratching my head*
Failure 40 as we say in Denmark... one needs to make sure that there is no more submenus in the code than available on the website, the script for closing subs does not work xD
Yup
What I noticed is the close_all_sub does not work unless you have more than ONE menu to open so for example you have iPad, iPhone, Mac - it works but if you've only built iPad and testing it does not work - I spent 30mins playing around with it - kept on building and realised that was the fix!
@@Alex-nn4qz Omg i had the same issue and even asked in the comments, but you just gave me the answer. Thanks!
@@aequitas7483 I have the opposit issue, only one works, as soon as i have multiple it doesn't... any Idea ? @websquadron
Has anyone tried to expand the code to have sub levels containers that close them to the level before? As Imran is explaining that the Ikea Menu works.
I want the sub levels to close one by one instead to go back to the main menu, but I can't make that work unfortunately
If you use an Accordion you could show sub levels one at a time.
i am having issue with the back button kindly help
Help as in how? Do you need a 1-2-1 consultation?
Awesomeee
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.
I put it in a container but the backwards icon doesnt work anymore, because it is not in main container anymore
@@zerobambiro you can put into another container without an issue.
I had a similar issue of the back button not working, i noticed it was because I hadn't yet added in all containers mentioned in the code (I was testing as I built it). So it has an event listener for Link_open_ipad but I hadn't added that container in. So the code failed after that point as it was "listening" for something that wasn't there. As such the close icon didn't do as it should. Looking in chrome developer tools > Console pointed out the issue and helped me remedy it.
@@andy1luckman Thank you very much man! I rebuild everything and the mistake was gone. I think it was the same reason. Appreciate your answer!
I found the solution. The container changed his width on mobile even tho it had a width of 100%. I just used this css on every menu container: selector { width: 100%!important; }
every time i refresh the page or open the website the main menu shows up for some mili seconds is there any solution
Shouldn't do so unless you have some JS optimisation delay or something else applied.
Hello, I tried to make the mega menu fixed and transparent, but it generates an error, could you help me?
Thanks
Possibly as part of a 1-2-1 consultation
@@websquadron Sorry I didn't understand, is there a second part of the video?
@@DERSONmusic I don’t provide 1-2-1 support for free thus it’s part of a paid consultation
18:56
That what i need...
I think the icon is under elementor its just called "times" btw not sure if helpful
Awesome!!
How can we make an Apple desktop menu?
I'll do that soon, but you could use the same process, or use Elementor's Mega Menu Widget.
It’s really sad that the elementor menu widget is just crap for real …
It’s fine.
I am finishing this project with elementor and will never touch it again. I will try bricks builder after that.
I agree. Elementor should make the standard drop down menus have the ability to operate in this way. This is so complex - especially when you need to pass the website to a client! They'll never be able to get their head around this :(
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.
Totally go for it with the centering :)
This is so awesome I’m having trouble with the Link_close_sub i edited the CSS ID to Link_close_sub_about for the about sub menu but when I click on the icon nothing happens I made sure that the IDs match with everything but it still doesn’t work
Are the ids unique?
@@websquadron yes the chevron icon I have it set as Link_close_sub_about and the plus icon as Link_close_all_about the plus icon works but the chevron icon doesn’t work.
@@websquadron I had a custom css in my custom code for a previous header I was working on I forgot about it I deleted it maybe that’s why it wasn’t working properly I’ll try it again. Thank you very much your channel really helps me out a lot 🤙🏾
Link_close_sub_ipad is not doing anything. Dont know why :(
Difficult to be sure without assessing
I had a similar issue, i noticed it was because I hadn't yet added in all containers mentioned in the code (I was testing as I built it). So it has an event listener for Link_open_ipad but I hadn't added that container in. So the code failed after that point as it was "listening" for something that wasn't there. As such the close icon didn't do as it should. Looking in chrome developer tools > Console pointed out the issue and helped me remedy it.
@@andy1luckman Hey andy, did you try to make the menu sticky to the top? For me it works with the Menubar, but when i tell the containers to be sticky aswell, it moves everything to the side in a weird way.
@@zerobambiro I have a container that the hamburger icon and logo are in. I made that sticky to mobile devices using the Elementor settings in Motion Effects. I then made each individual container for the mobile menu sticky also. Works for me ... although I am still to test on multiple devices. No strange movement to the side for me, might be margin / padding in how you have built your header.
For some reason I cannot get Link_close_sub_ipad to work. everything works just fine but oddly this doesn't any ideas?
Are you repeating the IDs?
@@websquadron I am using main and iPad. Close all work but for some strange reason close iPad doesn't
deleted this with code: // Show Menu_iphone when Link_open_iphone is clicked