Elementor Mega Menu without a Plugin - Elementor Wordpress Tutorial -

[@elementhow691]

Great video Imran, thanks for the collab!

[@Tenmilmedia]

Been waiting for this since the live! Thank you :)

[@websquadron]

Released it a day early as someone asked on the Facebook Group :)

[@saucydee1]

Brilliant! I love your tutorials. Going to tackle this in the morning. I can't wait to give this a go!

[@tvs3497]

That is so much better than using those bloated plugins. Thanks, very good.

[@tvs3497]

I purchased the code. I followed the directions and have the template working. I wish someone would enhance the Elementor Navigator. It would be nice if it showed some ID or tag for each section, element, etc.

[@tomislav_._9224]

Thanks for all the tips & tricks! Your tutorials are life saving - to the point and well understandable.

[@websquadron]

Happy to help!

[@tomislav_._9224]

@@websquadron One question though, I created a mega menu like in your video, all works great when using it except one thing: it is transparent. I cant get it not to be transparent (when I hover over the button, I can see hero section below and it gets very messy to navigate - but it happens only in first 0,5 cm of the screen, once I scroll down just a tiny little bit, problem is gone). I tried padding, margins whatever I could think of - but my knowledge and creativity reached its limit :)

[@websquadron]

@@tomislav_._9224 Add the background colour to the Inner Sections. :)

[@tomislav_._9224]

@@websquadron Thank you, it was the solution :) I somehow missed it (still lot to learn) :) Cheers!

[@hellosimonhq]

Great video, everything works well APART FROM the inner sections disappear when the mouse is moved from the button. What have I done wrong?

[@websquadron]

That means you have a gap between the header and the Inner section, so adjust the margins.

[@hellosimonhq]

@@websquadron YES! Such a neat solution. Been wanting to do this for a very long time - having an additional plugin to do this seems silly. It'll be an EPro widget soon enough. Thank you for helping!

[@angogr]

Thank you for the turorial - very useful. One question if you please. How can I (if I can) replace the hovering to clicking on the buttor in order to open the megamenu. Thanking you advance. Georgios Greece

[@websquadron]

Would need to add JS Add Event Click Listening. Try adding the code to ChatGPT and see it it pumps out a solution.

[@angogr]

Thank you for prompt response. I will try - thanks a million

[@angogr]

Sorry to trouble you but I did NOT manage to make it possible to find a click instead of hover solution - update to my reply

[@abhishekmarketing]

Hi! loved your video! I just have one question. Is there a code that kind of gives a smooth dropdown effect when I hover over the menu options? Most mega menus have this smooth drop-down effect

[@websquadron]

I've asked the dev person for that, but I have a feeling that it won't.

[@Melissa_Lawrence]

Haven't had to make a mega menu yet but will definitely try one out this week. My laptop crashed on me 😭 so had to order a new PC and waiting for it to arrive, I feel like I'm going through withdrawal not being able to do any website building until it comes Sept.16th lmao

[@websquadron]

Oh no! I have a sink that’s playing up so have had to order a new one and arrange for fitting :(((

[@Melissa_Lawrence]

@@websquadron so annoying isn't it!? I hate that mine is coming from across the country and wasn't an easy buy and pickup situation 😂

[@syslopes]

nice tutorial! my menu drops behind whatever content I have on the body of the page, did I miss something?

[@websquadron]

Check the z index as the page content may have a higher z

[@sardarzainkhan2206]

great men❤

[@newtrinohair]

Another excellent tutorial and some pretty nifty tips and tricks along the way! Thank you

[@bradedwards7830]

Awesome Tutorial!!! One question, what affect does the mega menu have on SEO?

[@websquadron]

See this :) kzbin.info/www/bejne/o32yq2lmoNeSqaM The same logic kind of applies, so add a Nav_Menu and then hide it across all devices in the Header.

[@marcosansalone]

Is this solution also possible with flexbox containers?

[@websquadron]

Not tried yet - as it’s based on Inner Sections and waiting for the final Flexbox from Elementor before we adapt it.

[@marcosansalone]

@@websquadron What do you mean for final? Is not good enough so far? I'm already using this solutions in different websites.

[@websquadron]

@@marcosansalone There are still bugs and the fi al may change things.

[@Claudius.a]

I used the new container for the submenus (the inner sections) and it worked just fine. Still trying to use the container for the main section, but currently having some alignment issues. So I stick to the normal old section for now. But container works fine for the inner sections (submenus).

[@websquadron]

@@Claudius.a :)

[@Tserang]

i follow everything. but tried with container instead of a section. after the css the container does disapear but it doesn't show on hover

[@Tserang]

ps, you got the best vids for elementorrr

[@websquadron]

I have got an updated one for the Containers :) kzbin.info/www/bejne/bnvXlWavrM2DgKM

[@sonparo9273]

Great video! It works!!! I'm starting to get confident with elementor and taking the courage to play with CSS with this kind of tutorials like yours! Thank you very much! I was wondering if there is the possibility to make that the mega menu appears only when clicking on the button and hiding again when clicking, like the standard burger button menu from elementor.

[@websquadron]

In that case you could build it as a pop up menu that’s activated on click of a button instead

[@fotiskanellopoulos]

Could the mega menu be another template so in case you want to edit the mega menu ONLY you edit the template instead of the whole menu. I believe it should work right ?

[@websquadron]

Indeed that would work fine :)

[@johanstam3602]

Very usefull stuff. Most other mega-menu solutions are very intrusive on the page speed (due to poorly written javascript) or just bad for SEO (pop-ups).

[@websquadron]

Indeed they can be bad for SEO, but then I just insert the nav menu into the Footer so it's always visible.

[@cocoethan1161]

Would a mega menu that won't stretch full-width be possible with this mega menu? As always great content and thank you to element.how

[@websquadron]

Yup, you set the size of the width how you want using the inner section/layout.

[@lyfecheck9346]

Thank you for this, but I need to know how to link to the proper page. right now this one is messed up. It's in the wrong link and I can't find the section to change the URL. I've tried from the menu directory and it's not working.

[@websquadron]

Remove the css code and then you’ll see your inner sections. The links would have been done on the buttons

[@lyfecheck9346]

@@websquadron there doesn't seem to be any css code. I didn't build the site, it got messed up when I tried to update plug-ins. It's running now but there's one link that I can't get to correct no matter what I do to it.

[@lyfecheck9346]

@@websquadron I found a menu short code. going to take a look at that.

[@eladtovim6138]

thanks for the video i have small peoblem when i add menu automatically i have underline my menu i choose none but its still show how i can remove it please???

[@websquadron]

Have you got any css applied anywhere? Go to content and stop the pointer

[@eladtovim6138]

@@websquadron the problem fixed thanks so much 🙏

[@ShankhaKamley]

What about the responsive mode? What happens on the phones??

[@websquadron]

On the phone - mega menus are not advised unless you do an off-canvas popup menu.

[@ndpool]

Very cool. But does it work with containers?

[@websquadron]

We’re not adapting for the containers until we have the final flex box container versions. Technically it should work.

[@saucydee1]

I added this mega menu just now. The menu part works fine, but after added the custom css to just one of the nav "buttons", that word moved up a little and is no longer aligned with the rest of the "buttons" in the nav menu. Any ideas what happened here?

[@websquadron]

Double check how it looks in live

[@saucydee1]

@@websquadron thanks! I've been working on it locally. I'm going to upload the site today and see. Have you seen mega menus affect performance and load times of sites? We also have a bigger background on the hero section. I'm worried all this design is going to leave a slow website. It's my first so I don't have any experience with this.

[@websquadron]

@@saucydee1 Technically it shouldn't affect as the Inner Sections are not visible until you hover. Just make sure that you use WebP images for the images and adjust for the mobile.

[@saucydee1]

@@websquadron thank you. They're optimized jpgs right now. Are webp images that much better? Do you have a video discussing that? #eagertolearn.

[@websquadron]

@@saucydee1 kzbin.info/www/bejne/fKDSloyugLerbpI

[@oscardelfino_mdq]

Woouuu!! Elemaster!

[@raspi.config]

How can we use it with vertical menu?

[@websquadron]

As in a Pop Up Menu? Or for the mobile?

[@raspi.config]

@@websquadron For Pop Up Menu. Vertically rather than horizontally. Imagine dividing the home screen into 25 percent and 75 percent. The menu will be used in the left column.

[@raspi.config]

@@websquadron for the mobile, please

[@websquadron]

@@raspi.config Best to use a Popup Off Canvas menu for Mobile or refine the Mega Menu Cointainers.

[@SamWereb]

Imran, why haven't you switched to flexbox containers, at least for KZbin demos?

[@websquadron]

Not until we get to Beta (at least) - and then I'll redo the Tutorial with that. I have this 'bad' feeling that we'll build something and then Beta or Final might undo the progress.

[@SamWereb]

@@websquadron I have the same feeling. Did Maxime say why he hasn't published in a while?

[@elementhow691]

@@SamWereb Hey Sam! I'm publishing constantly, just not so much on KZbin. Checkout the learning center on my website directly!

[@belgen]

I am using flex box containers, therefore "inner section" is missing.

[@websquadron]

You just drag another container into it to become an inner or use the native mega menu widget

[@belgen]

@@websquadron Thank you. Another question, how do we deal with the mobile menu? Can you please add a timeline to your videos?

[@zerobambiro]

I am searching for a full tutorial where someone actually builds a full mega menu that sticks to the top when i scroll down and explains how to set it up for mobile aswell. I feel like i am the only one who need this.

[@websquadron]

The MM will stay at the top if set as a Sticky Header.

[@Master5pl]

Hi, show me mobile version of this menu!

[@websquadron]

You don’t use it for the mobile as I mentor in the video. Best to use off canvas pop up menu for mobile.

[@alexmyth1109]

Looking really nice, but still plugins is way more simple IMAO

[@websquadron]

Takes minutes to set up :) And you have complete control.

[@Claudius.a]

Thanks very much for your tutorial videos. I've been binge-watching your channels and it has improved my Elementor design skill generally. I got my mega menu to work following this video. But I installed the Autopmize plugin and activated it, and suddenly the mega menu stopped working. I've tried everything - uninstalled the plugin, and cleared the cache - nothing is working. How can I restore the mega menu to function optimally again? PS: The mega menu works fine at the backend in Elementor Editor.

[@websquadron]

Make sure that you are not combining or aggregating any CSS/JS

[@websquadron]

Or use the Free PhastPress Plugin instead.

[@Claudius.a]

@@websquadron I did combine the JS/CSS. That was probably the cause. But then, I uninstalled the plugin and cleared cache from my cPanel. Nothing changed actually. Still not functional. I downloaded it as a template and tried on another site, it worked just fine. My question now is, how do I make it work back on my main website? I've tried to rebuild it, still not working.

[@Claudius.a]

@@websquadron, I just checked your 3-minutes video on the plugin. I'll definitely try it out now. Thank you, man. Your channel is helping me than you might think.

[@MassStash]

how do you all handle mobile with a mega menu like this? Just hide everything and go with standard wordpress menu for mobile, or something more clever? 🤔

[@websquadron]

Best to hide and use a standard menu or an off canvas menu

[@marcosansalone]

"For you header pick a name you will recognise" Name your template: hthghghghg 😆

[@websquadron]

Yup that will do :)

[@bebebe3000]

you are forcing me to sign in to get the code, what a chickie, there is a better UX approach to do it. Disappointed with your ethics.

[@websquadron]

The Developer of the Code allowed me to do a video - as I was really impressed with the feature - thus it's only right that I link back to the source. My ethics are unquestionable and I advise you to unfollow, unsubscribe and not be so disparaging or derogatory towards my integrity.

[@myrules3376]

very confusing men

[@websquadron]

Confusing how? Add button to Section with nav_item. Then add an Inner Section after each button with menu_content. Add the CSS.

[@bountyapps]

Thanks for the tutorial but sometimes you are all over the place and hard to follow.

[@websquadron]

Thank you for your wonderfully rude comment. Feel free to Unsubscribe or never watch my videos. I will not change for anyone.