Whether the menu should be built in the builder or not, I don’t really care. The fact that you can build something like this in the builder, wow! Thanks for demonstrating the power of Oxygen and how one could go about tackling a problem like this, Elijah.
This tutorial is great. I know most people that use builder software just want to drop in elements and throw together a site, but many designers such as myself build complex sites that are totally custom. This may not be for everyone, but it shows the potential Oxygen has. I'd love to see how to transform this to a mobile menu though.
Builders are great for workflow and consistency, but it's awful that people charge good money for non-bespoke blocky template websites. A little bit of CSS and JS here and there doesn't go amiss. I personally haven't got Oxygen as I've used elementor but do often find myself writing into template files on the backend and pasting them into divs on pages to achieve what i desire, do you use oxygen? Would you recommend over Elementor. I only do bespoke so i spend a while on my websites and i'm an extreme perfectionist with my designs so literally every tiny feature counts for me... I reckon for mobile just having the div the viewport height and possibly width (maybe just mobile not tablet) as if it's a full overlay?
@@kbit-dj Oxygen is great. If you find do write a little bit of code then Oxygen will do your website building faster. An it has a clean code so no worries there. Elementor is more for "using the ready elements" kind of builder
For those of you looking for an easy mobile solution, I would recommend hiding this menu in mobile view and adding a separate offcanvas hamburger menu. Oxygen have a tutorial for creating an offcanvas menu using the promenu element: ruclips.net/video/_Q35nzBHrlg/видео.html
Hi Elijah, Awesome tutorial, but may I suggest using opacity in combination with pointer-events: none; and pointer-events: auto; By using the pointer-events css property you don't have to use a huge offset for the left property. Thus you can use the left property to animate the menu in or out from either the left or right by offsetting it. Explanation: Any element with css property pointer-events: none; will not be able to interact with the mouse. Plus any element that is obscured by it will be clickable. By changing it to pointer-events: auto; the element will be clickable/interactable again. Example: /* Hide megamenu */ .hosting-submenu-container { opacity: 0; pointer-events: none; } /* Show megamenu when hovering over parent item */ .hosting-menu-parent-item:hover > .hosting-submenu-container { opacity: 1; pointer-events: auto; } Here is a link with more info about the pointer-events property: www.w3schools.com/cssref/css3_pr_pointer-events.asp Hope this may help someone out. :)
Very nice tutorial. That looks very similar to the menu used on the Oxygen site. You can also see how Oxygen did their mobile version of this menu if you look at their site. Oxygen is so powerful. Thank you!!
Really a very good tutorial, thanks for such an explanation Elijah, the only problem which I found with this is how we will treat this complete thing on mobile that's really a big backdrop to this if you or your team can come up with something which really works great with mobile as well that would be just great and a lifesaver. Thanks for the good work :)
Thanks for the tut! It is way more involved than it probably should be for a site builder, but at the same time it's great that it's even possible. P.S. I'm sure it would've been helpful to show the mobile responsive part for people as well. For that, I would probably just create a normal Oxygen menu widget, set it to be responsive at whatever screen size, and then hide it above that screen size. You would then of course hide the custom menu you created below that screen size.
I would disagree. For me (doing websites for 10+ years) is Oxygen Buillder just helper which saves lot of time, but is not bloated. With this you end up only with what you put there and no more. But of course there is more learning curve. I'm glad that Oxygen team is doing these tutorials.
i agree with you. This mega menu isn't really that fancy and most of the ones I've seen are quite uniform. I think the capability should just be built into the current menu builder options.
Thanks a bunch, this was a great tutorial and simple to follow. I was able to solve the mobile-responsive issue simply by creating a custom responsive menu just for mobile. Great job! Love it.
@@aviashlomo1501 by setting the larger mobile viewport where things start to get messy with the desktop menu, you go to Advanced/Layout and select Display: none. This way the desktop menu won’t show for that viewport and lower ones on front-end. That done, you have to create from scratch a mobile version of the menu, so you design it from the viewport where the desktop menu doesn’t appear anymore. Once you’re all set up just remember to select the mobile menu and set Display to none in the higher viewports. Tadaah: you have two menus!
Hello Elijah, thank for the video. But don't you think a built-in mega menu (like they have in Brizy) will be better as Oxygen is a visual page builder. No need to make all these custom code for a visual builder. Thanks again for the good work.
9:40 You mentioned you create a lot of times a Design system document when you design a site. Is it better to do a separate design system (notepad) or should you do a Design system Template in Oxygen or so? Could you do a tutorial about how you build the Design system with Oxygen if it's way working smart not hard :)? Thanks for the tutorial!
Thanks for the great video! What would you recommend to do for the mobile version of the website? Would you hide your mega menu construction on mobile and show a completely different menu (which in return will be hidden in desktop view)? Would be really happy to get some input from you. Thanks again!
this is what I want to know too.. Mobile is not getting enough attention, site builders tend to think of this as just some secondary things despite that mobile users are by far the majority.
Thanks for this video that I had to pause a million times and rerun 20 million times lol. It worked! Great video. How do you apply the same menu to mobile view?
Add this by default and without custom css, but with easy options. No matter if it is easy to do right now with all those steps, the best you can do is to make it even more easier with just a few clicks. Always think: How we can make our service even better? How we can serve better? This is how.. ;) Add premade megamenu designs. And a button and several buttons for every option to make random meaningful designelements!
If everything is made too easy, your work will become less valued, and your efforts worth less money. I for one would rather spend 10 minutes extra on a tiny bit of CSS and maintain a premium bespoke reputation than have the same as every other agency. Always think about how a service will affect the perspective of your work, too.
@@kbit-dj good reply! And you are right in a way. But in todays market, there are already apps/software/cms that lets you do advanced stuff/effects very very easy, so basically the other ones have an edge over you already. It's like programming a website completely from zero with html, vs using wordpress + plugins + theme = Much less effort and much more features. However the html site will probably load faster. Still it will be hard to maintain and keep it failure free & save. Building a Website these days is already very easy with all those services, wix, jimdo and all those site builders that you already know. The Client will not know what you used with plugins that easily, but you will have the effect anyway and get your money with less work. It's like driving a bicicle or a car... you will be much faster with a car, except for very close rides in a city with high traffic. You know whats the point.
wasserbesser ツ True that there are sooo many site builders and what-not already (wix 🤮🤮🤢) I do feel like there’s a stark difference in quality though, when comparing WP sites and those basic builders like GoDaddy & Wix. That said, for the sake of not supporting the likes of wix I would prefer the easy route also!
@@kbit-dj i personally hate wix and those cheap services, that made for the very average user. But I must say, if it would be that easy in wordpress and more organised and nice looking, I believe this would be a game changer. Oxygen has to compare and step above elementor, divi and beaver builder etc. for now it has a very good direction, but is still not on that level. Just look at the features of elementor... for that reason I'm using it right now, because I need it to be easy for my clients as well and without any problems. I would love to see oxygen step up the game of convience even more. thats why I'm asking for those features. They already have everything on their todo list, they "just" need to implement it properly and read all the reviews of the users about every builder and make it even better, when compared. Design-Quality, Features, Speed, Usability Convience is Key to become the best. Add all the advanced CSS stuff and make it as easy as yellow pencil to design those things, make it as easy to manage the content and add special features, intelligent generator for new design/elements to play around and change from there (like artisteer, but better), nice bulk-editing, easy translation compatibility, marketing features by default, best practice in everything, thats the way to go. At least on Speed Oxygen is Nr. 1, however still not on design speed amd editing convience. the easier it is, the more people will use it and like it. thats how it goes. Would love to see some good updates on the changelog - I hope to see some gamechanger updates in my emails soon - my best wishes ;)
Is there a relatively easy way to be able to adjust the submenu position depending on how close it gets to the browser viewport edges? Just to avoid the submenu ever floating off screen. Also, it seems like this method does make it somewhat difficult to come back and edit later, especially if a person edits it who didn't build it in the first place. Trying to fidget with turning absolute positioning and opacity on and off and trying to find the right elements with 999px left margin, can get tricky, and potentially bork the whole thing if they start messing with it. It would be nice to get a dedicated mega menu component just to make design/dev a little more smooth showing/hiding things and getting easy access to just the content parts, etc. Sort of like how the superbox or modal components, you can select which box is visible as you edit, etc. Thanks!
hi can I check, im trying to build this in 2023, is this still relevant? the dropdown doesn't work as of now and am building with oxygen 4.0++ will need some advice thanks
Hi, can you implement a "drop-up" feature? There are some menus, either at the middle or bottom of the page where you want the menu to expand upward, not downward
I was really looking forward to trying this but the moment I put in the DIV with the menu-item class (the one that'll trigger the megamenu) the site breaks and I get the red box on the front end telling me to sign my shortcodes :-( Remove the DIV and the error message goes. Tried it with and without the custom class. Also tried resigning shortcodes but no luck. Gutted
Click is an event, so you'd have to capture it with Javascript and add a class toggle. Like onclick="menuToggle()". Then in your function if you use jQuery you can $(this).toggle("dropdown-on") or whatever the code has to be. But clicking requires capturing the event, so it will take Javascript to do.
Hey Elijah! Great tutorial as always. However there's one error where you edit the default PHP/HTML in a code block at 30:00. Instead of This stopped a plugin from working properly on my site, and was pretty tricky to track down ;)
This is an awesome Tutorial. I purchased oxygen a while back, but just started to dive into it. The only issue I have is when making the divs in the drop-down a LINK. My Icon gets stacked on top of my big and small text... Thoughts?? Running RC3.5.....
Doubt, I will get any response with this but, my menu does not stay when trying to hover and click the links. Any idea on what is happening and how I can fix this?
Hi, is it also possible to lay out the html structure with the elements, and than code all the css styles by hand with the code block? like if you would code the enitre site by hand? (and javascript?)
Figured out one mistake. I went back and made sure not changing anything on the sizes and spaces. I went to the layout for the dropdown menu container ( div) and in the absolute values added -9000. did not work. Tried -9, -90, -900 and basically whats happening is that the drop down container is not moving from its position. It is appearing ( opacity becomes 1) but its not moving from its absolute position. Thank you
hello oxygen team, I really appreciate your work and I love oxygen. Can you make a detailed video on before and after state in oxygen elements? I am looking to make a quiz funnel but other stuff makes oxygen slower. o Please a bit help.
Thank you, but out of 100 people non-technical , how many can do this and follow step by step ... there are many mega menu plugins. why not use them instead within oxygen?
Because using Oxygen prevent bloating and loading stuff that you don’t need since you don’t use it. Oxygen is meant to be good, not to be for everyone.
I enjoyed this video but the process is not practical as it is really involved and you didn't get to the mobile responsive part. Keep in mind that most users will use a phone to navigate your site. Oxyelements also suffers from the same issues. The mega menus are not mobile responsive. Creating a simple to use megamenu is a challenge. Consider looking at how JetMenu from Crocoblock handles mega menus for Elementor.
You wouldn't need this to be mobile responsive. It's easier to hide the entire header for mobile users and create a mobile-only header with a hamburger menu button. And then just use a full screen modal for the menu, with a similar layout to the menu shown here.
@@bryncb Thanks for your answer - I was struggling with a similar issue. Are there any other problems with your way of doing this (besides the extra code which I assume will also be loaded on desktop view)?
Thanks Elijah .. Please do something along these lines for MOBILE menus - thanks in advance
Whether the menu should be built in the builder or not, I don’t really care. The fact that you can build something like this in the builder, wow! Thanks for demonstrating the power of Oxygen and how one could go about tackling a problem like this, Elijah.
This tutorial is great. I know most people that use builder software just want to drop in elements and throw together a site, but many designers such as myself build complex sites that are totally custom. This may not be for everyone, but it shows the potential Oxygen has. I'd love to see how to transform this to a mobile menu though.
Builders are great for workflow and consistency, but it's awful that people charge good money for non-bespoke blocky template websites. A little bit of CSS and JS here and there doesn't go amiss. I personally haven't got Oxygen as I've used elementor but do often find myself writing into template files on the backend and pasting them into divs on pages to achieve what i desire, do you use oxygen? Would you recommend over Elementor. I only do bespoke so i spend a while on my websites and i'm an extreme perfectionist with my designs so literally every tiny feature counts for me... I reckon for mobile just having the div the viewport height and possibly width (maybe just mobile not tablet) as if it's a full overlay?
@@kbit-dj Oxygen is great. If you find do write a little bit of code then Oxygen will do your website building faster. An it has a clean code so no worries there. Elementor is more for "using the ready elements" kind of builder
For those of you looking for an easy mobile solution, I would recommend hiding this menu in mobile view and adding a separate offcanvas hamburger menu.
Oxygen have a tutorial for creating an offcanvas menu using the promenu element:
ruclips.net/video/_Q35nzBHrlg/видео.html
Great tutorial Elijah. Anyone watching just set the playback speed to 1.25 to save a little time. You can still follow easily.
Hi Elijah,
Awesome tutorial, but may I suggest using opacity in combination with pointer-events: none; and pointer-events: auto;
By using the pointer-events css property you don't have to use a huge offset for the left property. Thus you can use the left property to animate the menu in or out from either the left or right by offsetting it.
Explanation:
Any element with css property pointer-events: none; will not be able to interact with the mouse. Plus any element that is obscured by it will be clickable. By changing it to pointer-events: auto; the element will be clickable/interactable again.
Example:
/* Hide megamenu */
.hosting-submenu-container {
opacity: 0;
pointer-events: none;
}
/* Show megamenu when hovering over parent item */
.hosting-menu-parent-item:hover > .hosting-submenu-container {
opacity: 1;
pointer-events: auto;
}
Here is a link with more info about the pointer-events property:
www.w3schools.com/cssref/css3_pr_pointer-events.asp
Hope this may help someone out. :)
FREAKING GENIOUS! :) Thank you!
But with pointer events the dropdown becomes visible for a moment when the page loads. With offset its not visible
Very nice tutorial. That looks very similar to the menu used on the Oxygen site. You can also see how Oxygen did their mobile version of this menu if you look at their site. Oxygen is so powerful. Thank you!!
Really a very good tutorial, thanks for such an explanation Elijah, the only problem which I found with this is how we will treat this complete thing on mobile that's really a big backdrop to this if you or your team can come up with something which really works great with mobile as well that would be just great and a lifesaver. Thanks for the good work :)
Thanks for the tut! It is way more involved than it probably should be for a site builder, but at the same time it's great that it's even possible.
P.S. I'm sure it would've been helpful to show the mobile responsive part for people as well. For that, I would probably just create a normal Oxygen menu widget, set it to be responsive at whatever screen size, and then hide it above that screen size. You would then of course hide the custom menu you created below that screen size.
I would disagree. For me (doing websites for 10+ years) is Oxygen Buillder just helper which saves lot of time, but is not bloated. With this you end up only with what you put there and no more. But of course there is more learning curve. I'm glad that Oxygen team is doing these tutorials.
i agree with you. This mega menu isn't really that fancy and most of the ones I've seen are quite uniform. I think the capability should just be built into the current menu builder options.
Loved this Elijah. Thank you. Would love a video on creating a design system on the go too 👏🏻
Thanks a bunch, this was a great tutorial and simple to follow. I was able to solve the mobile-responsive issue simply by creating a custom responsive menu just for mobile. Great job! Love it.
Fabrizio Van Marciano that’s the way I’m gonna go too; invert visibility for mobile and desktop depending on the breakpoint, but yes, separate menus.
hey bro you also have a great videos , plz how exactly did you make it responsive? can u make a tutorial or write me? thanks
@@aviashlomo1501 by setting the larger mobile viewport where things start to get messy with the desktop menu, you go to Advanced/Layout and select Display: none. This way the desktop menu won’t show for that viewport and lower ones on front-end.
That done, you have to create from scratch a mobile version of the menu, so you design it from the viewport where the desktop menu doesn’t appear anymore.
Once you’re all set up just remember to select the mobile menu and set Display to none in the higher viewports.
Tadaah: you have two menus!
Hello Elijah, thank for the video. But don't you think a built-in mega menu (like they have in Brizy) will be better as Oxygen is a visual page builder. No need to make all these custom code for a visual builder. Thanks again for the good work.
Good tutorial. I enjoy the depth of it. Keep it up
A wee bit late to the party as this is a year old now. But it's fab still. Really learned a lot here. Any sign of a mobile version? Thanks Elijah!
9:40 You mentioned you create a lot of times a Design system document when you design a site.
Is it better to do a separate design system (notepad) or should you do a Design system Template in Oxygen or so?
Could you do a tutorial about how you build the Design system with Oxygen if it's way working smart not hard :)?
Thanks for the tutorial!
+1 Mobile Menu :)
Thanks for the great video! What would you recommend to do for the mobile version of the website? Would you hide your mega menu construction on mobile and show a completely different menu (which in return will be hidden in desktop view)? Would be really happy to get some input from you. Thanks again!
this is what I want to know too.. Mobile is not getting enough attention, site builders tend to think of this as just some secondary things despite that mobile users are by far the majority.
Thanks for this video that I had to pause a million times and rerun 20 million times lol. It worked! Great video. How do you apply the same menu to mobile view?
Add this by default and without custom css, but with easy options.
No matter if it is easy to do right now with all those steps, the best you can do is to make it even more easier with just a few clicks.
Always think: How we can make our service even better? How we can serve better? This is how.. ;)
Add premade megamenu designs. And a button and several buttons for every option to make random meaningful designelements!
If everything is made too easy, your work will become less valued, and your efforts worth less money. I for one would rather spend 10 minutes extra on a tiny bit of CSS and maintain a premium bespoke reputation than have the same as every other agency. Always think about how a service will affect the perspective of your work, too.
@@kbit-dj good reply! And you are right in a way. But in todays market, there are already apps/software/cms that lets you do advanced stuff/effects very very easy, so basically the other ones have an edge over you already. It's like programming a website completely from zero with html, vs using wordpress + plugins + theme = Much less effort and much more features. However the html site will probably load faster. Still it will be hard to maintain and keep it failure free & save. Building a Website these days is already very easy with all those services, wix, jimdo and all those site builders that you already know. The Client will not know what you used with plugins that easily, but you will have the effect anyway and get your money with less work. It's like driving a bicicle or a car... you will be much faster with a car, except for very close rides in a city with high traffic. You know whats the point.
wasserbesser ツ True that there are sooo many site builders and what-not already (wix 🤮🤮🤢) I do feel like there’s a stark difference in quality though, when comparing WP sites and those basic builders like GoDaddy & Wix. That said, for the sake of not supporting the likes of wix I would prefer the easy route also!
@@kbit-dj i personally hate wix and those cheap services, that made for the very average user. But I must say, if it would be that easy in wordpress and more organised and nice looking, I believe this would be a game changer. Oxygen has to compare and step above elementor, divi and beaver builder etc. for now it has a very good direction, but is still not on that level. Just look at the features of elementor... for that reason I'm using it right now, because I need it to be easy for my clients as well and without any problems. I would love to see oxygen step up the game of convience even more. thats why I'm asking for those features. They already have everything on their todo list, they "just" need to implement it properly and read all the reviews of the users about every builder and make it even better, when compared. Design-Quality, Features, Speed, Usability Convience is Key to become the best. Add all the advanced CSS stuff and make it as easy as yellow pencil to design those things, make it as easy to manage the content and add special features, intelligent generator for new design/elements to play around and change from there (like artisteer, but better), nice bulk-editing, easy translation compatibility, marketing features by default, best practice in everything, thats the way to go. At least on Speed Oxygen is Nr. 1, however still not on design speed amd editing convience. the easier it is, the more people will use it and like it. thats how it goes. Would love to see some good updates on the changelog - I hope to see some gamechanger updates in my emails soon - my best wishes ;)
Is there a relatively easy way to be able to adjust the submenu position depending on how close it gets to the browser viewport edges? Just to avoid the submenu ever floating off screen.
Also, it seems like this method does make it somewhat difficult to come back and edit later, especially if a person edits it who didn't build it in the first place. Trying to fidget with turning absolute positioning and opacity on and off and trying to find the right elements with 999px left margin, can get tricky, and potentially bork the whole thing if they start messing with it.
It would be nice to get a dedicated mega menu component just to make design/dev a little more smooth showing/hiding things and getting easy access to just the content parts, etc. Sort of like how the superbox or modal components, you can select which box is visible as you edit, etc. Thanks!
Thank you Elijah for this.
9:26 whats the software to create "clipboard files note" like this?
hi can I check, im trying to build this in 2023, is this still relevant? the dropdown doesn't work as of now and am building with oxygen 4.0++ will need some advice thanks
still works as of 2024, its just CSS and classes setup, the instructions step by step has to be exact to achieve this outcome
Hi, can you implement a "drop-up" feature? There are some menus, either at the middle or bottom of the page where you want the menu to expand upward, not downward
What to do if I want to align those submenus side by side?
Elijah please could you do a tutorial showing how to add animated hamburger menu using multiple divs
How to make a full width mega menu on hover in oxygen ?
I think that the toggle effect has to start from a bigger parent div wrapping all the header items.
I was really looking forward to trying this but the moment I put in the DIV with the menu-item class (the one that'll trigger the megamenu) the site breaks and I get the red box on the front end telling me to sign my shortcodes :-(
Remove the DIV and the error message goes. Tried it with and without the custom class. Also tried resigning shortcodes but no luck.
Gutted
Got this all setup and working.
How can I make it so that the menu appears on a click rather than hover?
Click is an event, so you'd have to capture it with Javascript and add a class toggle. Like onclick="menuToggle()". Then in your function if you use jQuery you can $(this).toggle("dropdown-on") or whatever the code has to be. But clicking requires capturing the event, so it will take Javascript to do.
I love you guys! ❤
Really awesome!!
Hey Elijah! Great tutorial as always. However there's one error where you edit the default PHP/HTML in a code block at 30:00. Instead of
This stopped a plugin from working properly on my site, and was pretty tricky to track down ;)
Whoops, formatting ;) I meant to say, that last exclamation mark should not be there.
@@RocketClowns Sorry for the trouble, and thanks for the heads up!
Great tutorial!
I added the custom CSS code and noticed I have a line of text showing "hello world!" , how do I get rid of that?
Thanks!
Go to the HTML and paste a comment: .
This is an awesome Tutorial. I purchased oxygen a while back, but just started to dive into it. The only issue I have is when making the divs in the drop-down a LINK. My Icon gets stacked on top of my big and small text... Thoughts?? Running RC3.5.....
Got it figured out.. Allow Multi Line was defaulted....
Doubt, I will get any response with this but, my menu does not stay when trying to hover and click the links. Any idea on what is happening and how I can fix this?
Nice tutorial. But you should have the habit of labeling the items in the structure panel. Makes it much easier to follow along.
Hi, is it also possible to lay out the html structure with the elements, and than code all the css styles by hand with the code block? like if you would code the enitre site by hand? (and javascript?)
Yes, you can do that if you'd like.
@@OxygenBuilder Alright! Thanks a lot for the answer
How this works on small resolutions?
Figured out one mistake. I went back and made sure not changing anything on the sizes and spaces. I went to the layout for the dropdown menu container ( div) and in the absolute values added -9000. did not work. Tried -9, -90, -900 and basically whats happening is that the drop down container is not moving from its position. It is appearing ( opacity becomes 1) but its not moving from its absolute position. Thank you
hello oxygen team, I really appreciate your work and I love oxygen. Can you make a detailed video on before and after state in oxygen elements? I am looking to make a quiz funnel but other stuff makes oxygen slower. o Please a bit help.
Thanks for video but can you please make mobile version
Thank you, but out of 100 people non-technical , how many can do this and follow step by step ... there are many mega menu plugins. why not use them instead within oxygen?
Because using Oxygen prevent bloating and loading stuff that you don’t need since you don’t use it.
Oxygen is meant to be good, not to be for everyone.
This is good, but just spent a while following along and of course, its not responsive....
30:13 Say good bye to hello world. :-DDD
That's a boss move
There's a typo there that could break things on your site. Just put so without Elijah's last exclamation mark.
@@RocketClowns can you explain how to get rid of the hello world please? thanks!
Can anyone help me to make it responsive?
Doesn't work on mobile.
I enjoyed this video but the process is not practical as it is really involved and you didn't get to the mobile responsive part. Keep in mind that most users will use a phone to navigate your site. Oxyelements also suffers from the same issues. The mega menus are not mobile responsive.
Creating a simple to use megamenu is a challenge. Consider looking at how JetMenu from Crocoblock handles mega menus for Elementor.
You wouldn't need this to be mobile responsive. It's easier to hide the entire header for mobile users and create a mobile-only header with a hamburger menu button. And then just use a full screen modal for the menu, with a similar layout to the menu shown here.
@@bryncb Thanks for your answer - I was struggling with a similar issue. Are there any other problems with your way of doing this (besides the extra code which I assume will also be loaded on desktop view)?
This isn't difficult at all. People are so lazy because they've gotten used to builders doing all the work.
Yeah, I suppose that's the point of builders. I would waste less time building this with code.
@@Arttyor save the templates each time you create a new style of navigation and build your own design set. You can reuse them on quick projects.
Here's another approach (premium tutorial): wpdevdesign.com/oxygenbuilder-com-nav-menu/
This tutorial would be so much more helpful if it showed how to call a WordPress menu (instead of creating each individual item).
Dislike for the fact that HTML semantic is really bad, no nav, no list and you don't use the menu feature form WP.
This isn't as Mega as I had hoped, I will rewatch when I feel kinder ;)
*edit - on second thoughts - decent tut tbf
A mega menu is no more difficult than anything shown here. Just make the dropdown wider and use a column item at some point instead of a div.
So much pain and it doesnt even look that great.