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

[@ramin7797]

I just love your videos Always halpful🎉

[@websquadron]

I'm so glad!

[@Ife-Emmanuel]

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

[@josephvillenabuchberger4257]

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!

[@theresasouthern8631]

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

[@bedire8151]

best explanations, please keep making content, just subscribed

[@user-gu2ir9rl4h]

awsome feature, thanks

[@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

[@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.

[@championcode6145]

thank you this is very helpfull awesome

[@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!

[@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.

[@ideaplusagency]

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

[@onwukatochukwu3406]

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

[@websquadron]

Do you have any optimisation applied?

[@onwukatochukwu3406]

@@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.

[@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

[@mooltech]

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

[@angielynrivera]

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

[@websquadron]

I'll have a look

[@bb-designstudio]

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}

[@bb-designstudio]

@@websquadron thanks i will try it

[@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.

[@rhysadams]

How does the Mega Menu effect SEO?

[@websquadron]

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

[@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

[@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).

[@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?

[@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

[@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

[@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 😊

[@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

[@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

[@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

[@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.

[@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

[@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.

[@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

[@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

[@mohammadshafeeq3471]

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

[@websquadron]

Ok

[@TheSoggetto]

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

[@user-sk5bg2dp6q]

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.

[@user-sk5bg2dp6q]

@@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

[@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

[@eleanor.shadow]

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

[@eleanor.shadow]

@@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.

[@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

[@elgatodiego]

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

[@websquadron]

3.12 :)

[@elgatodiego]

@@websquadron Thanks

[@kwdigitalsolutionswebsited3365]

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

[@websquadron]

Nope :) As it's just containers.

[@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

[@sofieversluys5331]

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

[@websquadron]

Which Theme are you using?

[@arsalanrehman9117]

Pro which version

[@websquadron]

3.12

[@arsalanrehman9117]

@@websquadron free available with out error and virus?

[@websquadron]

Buy Pro