Create a Mega Menu in Elementor with No Plugins
HTML-код
- Опубликовано: 10 сен 2024
- The CSS needed for this is in the comments.
I've adapted the amazing Maxime's method of creating a Mega Menu in Elementor with NO PLUGIN - to work with 2 sections. See his method here: element.how/el...
Mega Menus are an amazing way of having lots of additional content presented when you click on a Menu Item rather than just a Link or a Dropdown.
Let's get ready to Megamegamegamega!!!!
PS: websquadron.co.uk
PPS: Don't miss out on our amazing Create a Website in One Weekend Course - and it comes with a FREE Elementor Pro License!! websquadron.co...
PPPS: Contact us for any questions or to collaborate.
PPPPS: I must stress that we only build with Elementor and no other Page Builder.
Cheers good video mate! Really glad you created fresh content out of my code!
Big thanks to you!!!!
Great!!!
Thanks a lot. Blessings from Venezuela
You are welcome!
Got it to work! Thank you, this is awesome!
You're welcome!
This is fab! Thanks to you and to Maxime!
Maxime gets the maximum credit :)
Don't know SEO would like this menu. I would recommend to set HTML tag to nav for the column that holds the buttons.
Yup, that's a good point.
hello Frank , can u show a example of witch kind of HTML tag we should write ?
@@vincentmartin6825 like I said the NAV tag for the column that holds the buttons.
Cool Man , thnx a lot Love this tutorial
i set a list item within the mega menu with a url link to open in a new window. Problem now is that in the original (first window), the first inner section doesn't disappear, it just stays visible even when mouse cursor is not hovering over the MM button or inner section. Any recoomendations?
Technically it should disappear when you're not hovering over it. Not sure about a work-around on that. I'll have a look later.
Thank you so much!
Can you show a real website where mega menu has been implemented with this method and it is working fine?
Yup - and he used this method as I helped him with it.
livandco.co.uk
😄 This is scum. Less then 1% chance that it would work in any theme. Gyus needs contacts.
But it's easy to build by using drag & drop 3rd party addons in 5min. I use ElementsReady Addons for my WordPress Website Customization, It has 100+ free & Premium Widgets with 850+ preset elements.
the css file is missing , the only file are 3 json files for template that doesn't have any css files in them , instead they only have javascrip
The CSS is there. Click the link.
So, from where can i find the CSS code to finalize this?
It’s in the description.
But Elementor have now brought out the inbuilt mega menu
lol it's pretty hard to click any element on this mega menu items before it disappears.
This is easy to fix. Reduce the top margin of the inner section (use negative values) to ensure there is no gap between the menu and the mega menu items. Because you probably have a small gap - that’s why when you scroll to click it disappears.
I used top margin to align the bottom of the button with the top of the inner section and set a higher z-index for each inner section. This fixed the issue :)
Awesome!!! Thank you
You're welcome!
My man u do great..
Advanced -> Positioning is not listed for me when editing the button. Where did it go?
It’s now under the margin/padding bit.
It’s called width.
thanks for the tutorial! how can i make the megamenu fullwidth? i use the new flexbox and i get it to work. but when i try to make it fullwidth it doesnt work. its always in the navigation container (70% boxed).
We’ll be updating with an alternate method once we have the final flex container version released
Hey man, I did apply this today and it works amazingly, almost amazingly ;P. It's a great workaround as I don't wanted to install another plugin and bloat up my website again. So this is sleek and it works great. Thank you!
I just faced 2 issues, of which I could solve one.
1) When the menu opend it was behind some other items on the website. Therefor I had to add the z-index to css and give it a higher ranking compared to other pieces on my website.
2) When I do click on a button or some content on the mega menu (not clicking a link) then the content would not change anymore by hovering over the buttons. Do you have a solution for this issue? Did you encounter the same issue?
Looking forward to hear from you.
Best regards,
Sebastian 😃
Indeed for 1) you need to use z-Index, and for 2) when you click, you have to move away before you can hover/interact again
Great educational vidio but it seems something must have changed since this was created. I added the 2 buttons but I can not find a positions tab under the Button Advanced area. This is Hello Theme . Can't get the buttons to be on the same row.
See this updated version: ruclips.net/video/YJ3YNM4Ivmk/видео.html
Love this approach. Is this set in responsive to just for Desktop and then you create another header for Mobile or is there a REsponsive setting that should be used. Thank you so much for this solution..
For mobile I would use a popup off Canvas menu as mega menus like this can be a pain on the mobile.
@Web Squadron Also, the menu is behind the top of the page instead of in front of it. Can you point me to a video where you taught about layers of headers being in front of the top of the page in elementor pro?
Maybe set that section to be sticky
Hi @websquadron, I followed your explanation and got it to work on the section after adding the code but it would not work when I view a page. Rather it shows up like I have not added the code. Is there a fix where I can correct this abnormally please?
The code definitely works as it’s been applied on numerous sites. The exact cause on your site is tricky as we can’t see how you’ve built or executed the page/content. We could look at it but we charge for 1-2-1 support.
@@websquadron I cleared my browsers and the CSS displayed correctly. Thank you!
This is just what I've been looking for. Thanks so much!
No problem!
A great work around ! But when I move the cursor from the menu to reach the Mega Menu it disappeared. In order for the Mega Menu to be visible I have to click the menu button 😥
You need to make it overlap by 1 PX and use some transparent top margin.
@@websquadron Awesome ! Thanks👍
Thanks very useful content in your video
:)
Imran, does this still work with containers? Gina.
Use the Elementor pro menu feature now
I made it work I think. If not I'll put the mega menu on and do it that way. Thanks Imran.@@websquadron
You earned a subscriber
Thank you so much !!
How are people dealing with mobile menus in this scenario?
I recommend that you either have a separate menu (using standard Nav Menu) for the mobile mode (and not have the mega menu shown on the mobile) ---- or ---- you add a Pop-up menu for the mobile that does contain images etc.
Hi.. it's good for desktop view .. what about mobile view
In that scenario, I would use a Popup Menu - and compromise on the layout.
do u have tutorial for vertical mega menu? please help me
Hi, you could do that with the code I gave.Just set the sections to be a certain height, or even fit to screen, etc.
@@websquadron i did it, thank for your rep. big thank
Very clever and a very enjoyable video. Thanks for making it - you have a fab presenting style. Quick question - how does all this work when on a small tablet or mobile phone?
On the mobile it’s not advised due to the limited estate and in this case I would recommend a normal pop up menu rather than the mega menu.
super bravo e simpatico :)
Hope it helps :)
After doing this tutorial, I found I few things:
- My header nav section was originally set to sticky, which caused the whole menu to glitch out as soon as I moved the dropdowns below their respective nav items (literally, the footer of my page would disappear and everything just got messy 😐
- Setting the menu to sticky AFTER doing all of the work and adding in the code DID NOT cause this same issue (can't explain it, really) 🤷♀
- Regardless, the mega menu dropdowns still appear BEHIND the page content instead of over it, which is a problem I've seen someone else in the comments also mentioned 😫
- I can't remember seeing this in the video tutorial (might have missed it though) but I had to add the CSS Class 'menu_content' to the sections I wanted to use as dropdowns (I pretty much just figured this step out based on my limited knowledge of CSS)☝
Overall this tutorial DOES work. However, if you run into any issues, such as your dropdown displaying behind your page content, that can become more difficult to fix, especially if you don't know a lot of CSS.
The way you can realistically style your menu will also be limited. Elementor doesn't allow for inner sections to be placed within other inner sections. As a result, you won't be able to have your main menu (before the dropdowns are added) to be in a column of its own within an inner section, because then you can't place the inner section for the dropdown directly below the nav item it must drop down from (hope that explanation makes sense).
I haven't tried plugins like Jetmenu as of yet, so I'm not sure how relatively difficult or easy they are compared to this tutorial. I also can't compare the menu customisation options (would hope/assume you get more customisation with a paid plugin, however. I mean ... you're paying for it).
My verdict would be that the tutorial is good, easy to follow and (assuming you don't have issues with how your menu displays by the end), it's an easy way to get a mega menu in Elementor. However, you might not get as much flexibility in terms of styling as you'd like because of the whole inner section that can't be within an inner section problem. You need to decide whether you want to compromise on your 'ideal' menu design with THIS menu, or if you'd rather want to explore other options. If your 'ideal' menu design wouldn't bring up the whole inner section fiasco, this tutorial might be ideal for you.😁
Hi. Many thanks for the detailed reply. When the. Menu appears behind other items the issue is normally due to Z-Indexing.
The method is still fine for now with Inner Sections and you can nest them (if you really have to) by copying columns that already contain an inner section into the same column again - I have a video on that. But this solution although lengthy is the best way without resorting to a plugin until Elementor release the upcoming Mega Menu widget - and from what I’ve heard, it’s coming soon :)
We did test with other Plugins prior to this approach and we always found ourselves restricted a little with a big learning curve, and the last thing you want is to have some plugin conflict later - especially one that ruins the menu.
Update: There's another comment mentioning that the dropdown disappears when you hover your house over it to click items. I have found that my menu also presents this problem.
@@rozannew Can I be cheeky and ask t have admin access or editor access so I can check the code and see if I can spot the issue? No obligation :) Email me in info@websquadron.co.uk - and if you do agree, then please make a backup before giving me access.
great tutorial, works fine with sections but not with flexbox containers, any help, thanks
I’ll be creating a mega menu version soon once the final version of flex is released
Thanks a lot for the video man, it is very helpfull. I am looking for the CSS code, but I can't find it.
Hi
Click on that link in the description and scroll down on the element.how page
Can you please update it to work with Containers
Ha - that's the plan - but waiting for the Final Container Release :)
Hi bro, thanks for this tutorial. I have a question, Can I do this Menu with a click function? I mean instead of activating the menu with hover, can be activate it with a click... you know how to do it? Thanks again bro...
You’d need to add JS which is a pain for me. Might be better to just have buttons and then when you click them a popup (using fixed positioning) is used to appear. The drawback with click menus is that you have to click to close or click on another to close the previous. Hovering would remove the need to click a lot :)
@@websquadron thanks bro, Have you tried with .button .button:after .button:activate:after functions?
@@albertodiaz6247 Not yet.
Love this tutorial! so much energy, you are fun to watch! I had a problem: the positioning isn't coming up in my Advanced tab ..... so I couldn't inline the buttons.
and a question: can this button then be used to click through to the relevant page? are you then deleting the top icon list?
Yup, you can add a Menu Anchor such as websquadron.co.uk/page_name/#anchor_name
Go to the Advanced Tab, and under the Margins and Padding, then click the Width to be Custom. And then the Fixed and Absolute Positioning settings.
Since you've made this tutorial Positioning is not in elementor under advanced anymore.
It is there.
Click on Width.
Then Positioning.
Thanks very much for this awesome tutorial. I built my own mega menu. But how do I get the top section to be sticky when I hover to the sub-items? As soon as I hover to a sub-menu item, my menu dissapprears
It shouldn't disappear at all. Do you need to add some top margin to space them out?
@@websquadron No I don't think so. So when I hover over the top section, and scroll down to the bottom section, the bottom section (sub-categories) disappears. Not sure what I am missing.
@@websquadron It only stays there if I click on it.
@@bluepeamarketing Hmmmm... not sure. We could look into it, but we charge for 1-2-1 support :(
@@websquadron Yes please? How do I contact you?
I did'nt find any css
There is a link in the description.
Where is CSS ?
Look at the Video Description. The link is there.
Hi. Great tutorial!
Side question, what do you do to keep your site responsive when doing a mega menu like this? I'm not too advanced on Elementor, can I set a different header template on mobile devices, perhaps?
Yes, exactly. You would create this as a Header Template, and set the Section to be only viewable on a Desktop/Tablet etc.
And then have a separate Section for the Mobile.
I would do this all inside the same Header Template.
@@websquadron Thanks! I'm definitely going to try this out. 👍😁
where is the css code
It’s in the description. There’s a link.
Where is the code to copy ?
Click the Link that takes you to Element[dot]how for the code.
But use this video instead which is a New Version: ruclips.net/video/YJ3YNM4Ivmk/видео.html
No CSS at all in the comments \ description. GG
There is a link in the video description - that takes you back to the original Developer's Code as he does update it regularly.
no code below
There's a link to elementhow.com
Thank you, but to much wate…
wate?
Useful, next time don't scream. It's kind of irritating
I didn't scream and if it irritates you then I'm really sorry. Thanks for your insightful comment. This video may help you out: ruclips.net/video/fpMXTI7cHBk/видео.html