How to use the Mega Menu Widget Elementor Wordress Tutorial - Elementor Pro

Join our 'How to Start a Web Design Business' Course - and use strategies to grow, get clients, and generate recurring income: websquadron.co...
Book your 1-2-1 Consultation: websquadron.co...
How to use the Mega Menu Widget Elementor Wordress Tutorial - Elementor Pro
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co...
🔗 All of our Important Links: websquadron.co...
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com...
😃 Get Elementor Pro: be.elementor.c...
😃 Boost your KZbin Analysis: www.tubebuddy....
👕 Get our Merchandise: websquadron.co...
🥹 Support us: paypal.me/Webs...
Hire us to work on your Website!
💌 [e-mail]
👩‍💻 Visit websquadron.co.uk

[@bedire8151]

best explanations, please keep making content, just subscribed

[@Ife-Emmanuel]

Great video, thanks Imran. You're a star 🤩

[@KathrynCostello]

This is great thanks. I created a mega menu in my header. It works but I can't find a way to make the activated menu item have a different state while the drop down content appears--a color, and arrow... something to let the user know which menu items is active once they move the mouse away. Does this exist in the settings or are there CSS options? Thanks!

[@websquadron]

I'll have to have a think about that.

[@stepheniwanowsky8532]

Hi there, I'm also searching for a solution for that. I think this is really missing. @@websquadron

[@stepheniwanowsky8532]

Furtheremore it needs an active state on the top-level item when you are on a subpage.

[@theresasouthern8631]

Loved this! And at 1.75 the speed, it was PERFECT :) Your videos are the bomb!!

[@joe-buchberger]

Finally ,you made my day thank you so much

[@websquadron]

My pleasure 😊

[@bengareth]

You're a really talented content creator man 🙂 Thanks

[@websquadron]

I appreciate that!

[@FarigBanda-m6t]

awsome feature, thanks

[@harbourdogNL]

4:46 Any way of configuring it so that, if, when someone clicks or hovers over "Test" a small text box appears, and if they hover over GMAdaptive a different text box appears, etc.?

[@websquadron]

Yes if they used different items to appear in the mega menu

[@michelle-frueh]

Hey thank you so much for this one. I just started to use those beta functions like the mega menu and I have sometimes the problem to load the pictures in it properly. I see the cracked Document sign but not always. Have them on medium/large resolution. Also the editing and saving takes ages but only for the menu-items (level 1 - chaning the name for example - the letters are way behind). Any idea why it could be?

[@websquadron]

Do you ever have issues with http and https addresses for the images? What is your php memory limit?

[@crowley_offcl]

Very helpful, thank you! I'm having a problem having it stay open tho; as soon as I hover down to try and click in the submenu it closes. Super annoying. Any insights or tips would be appreciated.

[@websquadron]

Thee may be a gap between the bottom of the menu and the top of the mega menu. Add some negative margin or check for spacing.

[@ramin7797]

I just love your videos Always halpful🎉

[@websquadron]

I'm so glad!

[@leaninhistory]

My dropdown menu isn't working well. It doesn't drop down at all.

[@websquadron]

Do you have any optimisation applied?

[@leaninhistory]

@@websquadron one that I can recall. I've deleted all plugins and only have elementpr Pro and elemntor installed with the hello element or theme.

[@gigatonneshorts]

this is really helpful thank you

[@mmPhobos]

Hello, the video is very nice, thank you. How can we slightly darken the page itself when dropdown items are opened in the menu? I searched in the settings but could not find such a feature. Will we have to do it with custom css?

[@websquadron]

Good question. I'll have a think about that.

[@catalyseweb6029]

Hi there! I'm curious if you found a solution. I'm trying to achieve something similar, and I'm wondering how to do it... I need the whole header to change background-color when mega-menu is active (because transparent header on original state).

[@rhysadams]

How does the Mega Menu effect SEO?

[@websquadron]

See this: kzbin.info/www/bejne/o32yq2lmoNeSqaM

[@bizbosdesignstudio]

yoo dude, i have a question, if I make a dropdown menu no matter elementor or wordpress, how can I do a act while hover on a link the only think I changed are background color and font color but I want if he hover over a link it should stand out or move a little bit to right, I hope you know what I mean :D

[@websquadron]

You would add something like .class.active:hover {left etc or transform etc}

[@bizbosdesignstudio]

@@websquadron thanks i will try it

[@mtnpfi]

Hi Imran, when one of the items in a Mega menu is an anchored link and the whole mega menu - covering 2/3rds of the content of the page - will not close by itself after clicking an anchor link that links to the same (already opened) page - do you have any idea how to fix this? Thank you!

[@aarrek]

Thank you very much for another great A tutorial , btw, I want to create an effect where each line that is part of the menu floats from the side one after the other (with a small delay). Is this possible with this new menu?

[@websquadron]

You could add Entrance Animations with delays

[@aarrek]

@@websquadron thanks 😊

[@mikea9350]

Is there a way to have this as a vertical menu?

[@websquadron]

I am still looking into this. You could arrange the items to be vertical with containers

[@mikea9350]

@@websquadron How would this work with sub-menu options? Would I use an accordian element?

[@phkoon]

@@websquadron Just took some time to sort this out and found a way to set it in a vertical layout... At the current moment they still only let you choose to set it in a horizontal listing layout or as a toggle dropdown menu. In order to set it as a vertical listing, this snippet works fine: selector .e-n-menu ul { flex-direction: column !important; }

[@phkoon]

@@mikea9350 Take a look at my previous answer, it addresses your first question. Couldn't understand the second question though.

[@websquadron]

Hmmmmm, I'll try this out :)@@phkoon

[@baliflorent6971]

Thanks. Is There a way to add badge to The Mega menu items ?

[@websquadron]

As in a corner badge? Maybe see this: kzbin.info/www/bejne/jpfdYX2Dhq-nh6s

[@ashman123456789]

would this be the way to have a popup menu with another submenu popup? ie if you have dropdowns in a current popup menu it looks odd

[@websquadron]

Not really as it works horizntally.

[@ashman123456789]

I found a mega menu plugin that made it work, just wouldnt let me use the background overlay in the popup. plugin just called mega menu if you wanna check it out@@websquadron

[@GuyForssman]

All good and well but how do you keep the sub items aligned underneath the main menu item, while resizing the screen.

[@websquadron]

That's where MM can be a pain, thus I only use it with a Boxed Width.

[@dariabernabei7778]

Lovely! Is there a way to disable the toggle for mobile? I´d like to keep showing the main links rather than the hamburger.

[@websquadron]

You can set it to none for the breakpoint

[@ashwinsalunke9929]

the drop down does not work for me when I created the menu when click on arrow i dont see the section to add elements I dont know why its not showing any help ?

[@websquadron]

Are you getting any JS issues when you view Live?

[@wacabhi]

Nice Video @Websquadron I was actually looking for help with flip box container of elementor. Is there any way to change it's transition from hover to scroll??

[@websquadron]

That is tricky and better to build as a container instead and use some WebKit animation css

[@wacabhi]

@@websquadron ok any article or reference if you can refer

[@websquadron]

@@wacabhi ChatGPT

[@tahirkh315]

Thank you Sir for the video How i make mega menue full width?

[@websquadron]

Make the containers be full width, and set container gap to be 0

[@ScottStoll]

Is it possible to build a separate regular nav menu for mobile and hide that on desktop and vice versa? It seems if I hide things in Elementor, they still load.

[@websquadron]

Yup you can do that. Just responsively hide it

[@DanZL1]

Is it possible to create a mega menu and connect it to the existing WP Manus under appearance> menu?

[@websquadron]

No :( Buy you can add that menu to the mega menu

[@angielynrivera]

Hi, the active color state for megamenu is not working properly

[@websquadron]

I'll have a look

[@JeffHesterDesigns]

Great video. How do you make mega menus accessible? (keyboard control)

[@websquadron]

This is where MM isn't great for accessibility - thus the click to open the MM is the best option.

[@championcode6145]

thank you this is very helpfull awesome

[@elgatodiego]

Hi, ¿In What version on elementor pro did you test this mega menu?. Thanks

[@websquadron]

3.12 :)

[@elgatodiego]

@@websquadron Thanks

[@ArdennesArtisanat]

I would like to make a mega menu for mobile like an app. You could get your menu on bottom of screen and when clicked menu appears. Unfortunately breakpoint does not leave me do it I have no other change than hamburger for mobile, any idea on how to do so ?

[@websquadron]

You can add it as a sticky bottom, and then make it activate a Pop-up off canvas menu rather than a mega menu.

[@ArdennesArtisanat]

@@websquadron Thank you for your quick answer ! That's what i'm looking at, i just find it kinda sad that we have to choose between megamenu and pop up when for example shopify let you do so. Thanks again for your reply, keep up the great work

[@Lqdtch]

Any idea how or if its possible to incorporate the Menu Cart Widget into a Mega Menu?

[@websquadron]

Tricky. One way is to make the container that holds the Mega Menu be (let's say) 90%, and then another Row Container that is 10% and the Menu Cart is there. Or you, add it into one of the Hover options, ie: Item#3 etc, but then you need to hover on the option for the Mega Menu to open, and then you need to click Menu Cart for it to open, but that adds extra clicks.

[@rizkyaldino8118]

How to make the mega menu vertical and disable the hamburger toggle? There's no vertical option like wordpress menu and disable toggle

[@websquadron]

Yup, this is on my to-do list to investigate.

[@EmanuelePesa]

My website is one page website. Is it possible to make the button's menu just scroll to that section when clicking on it?

[@websquadron]

Yes. Use menu anchors and add #anchorname as the link

[@Rodkidesings]

Is it possible to close the megamenu when you click outside of the container? I only can close it when I click again in the same main button.. :(

[@websquadron]

It should only work based in hover. How big is the VW and VH of the mega menu?

[@Rodkidesings]

​@@websquadron yeah, I've noticed that. Its a 100vw and autoVH or 50% aprox

[@websquadron]

@@Rodkidesings Difficult to help without a 1-2-1

[@openskyphotography]

Do you think this will be SEO friendly? Currently I create custom mega-style menus using buttons that trigger templates that slide in for a "mega" effect.

[@websquadron]

See this: kzbin.info/www/bejne/o32yq2lmoNeSqaM

[@luqmanbashir5014]

i can't find the menu option in my element pro plugin please help me thank you.

[@websquadron]

Have you got Menu enabled in the Elementor Features?

[@ideaplusagency]

No way to add the traditional menu (especially including sub menus)?

[@ellieisbusy]

Hi, Imran. I'm trying to create a mega menu on my site but I'm only currently able to create one drop-down for one Category. The other links I've got on my menu simply won't allow me to create a new drop-down! Do you know if anyone else is having the same issue? Thanks.

[@websquadron]

Very strange. Can you create on a new page to double check

[@ellieisbusy]

@@websquadron on a new page? Not sure how to do that, I’m going through Theme Builder… I have tried opening a new window but got the same result. I genuinely don’t get it.

[@pointofone-x2x]

unable to see the MENU feature under elementor -> setting -> features, could you please help me out of this

[@websquadron]

And you can’t see it when on a page either? Which version do you have ?

[@pointofone-x2x]

@@websquadron i'm having Elementor 3.23.3 version and i'm able to see the Page Transitions, i tried many ways but no hope

[@nin375]

The submenu indicator is too near with the text. How to make the indicator available at the far right? Plz help

[@websquadron]

Have you inspected that part and added CSS?

[@nin375]

@@websquadron can u Share the code

[@nin375]

Plz guide me

[@ronrichardson175]

Interesting - my version 3.12.2 (pro) does not have DROPDOWN EFFECT > OPEN ON, and defaults to CLICK.

[@websquadron]

Hmmmmmm I have heard of a few saying that which is weird

[@RyanCochrane-g7k]

I am not able to find the menu element on my sidebar? I only see "Wordpress Menu"

[@websquadron]

Are you using Flex Container?

[@mohammadshafeeq3471]

I still like the elementskit mega menu because it lets us use the mega menu in the normal menu

[@websquadron]

Ok

[@MrGoalie2012]

they really need to be auto-aligned when you drop the new container and menu in, mine keeps just fully aligning to the center of the screen of to the far left instead of just aligning straight down....like it's supposed to. super annoying

[@arsalanrehman9117]

Pro which version

[@websquadron]

3.12

[@arsalanrehman9117]

@@websquadron free available with out error and virus?

[@websquadron]

Buy Pro

[@sofieversluys5331]

My toggle/hamburger is missing. And the hover does not work

[@websquadron]

Which Theme are you using?

[@vikaskumar-xn3ce]

A sincere advice - Show the final result at the first few seconds in video So that we can know what we will het at the final result

[@kwdigitalsolutionswebsited3365]

Hey Imran, does the mega menu affect speed at all?

[@websquadron]

Nope :) As it's just containers.