How to create mega menu with columns in CSS and Elementor | Menu dropdown with columns - NO PLUGINS

In this tutorial, you will learn how to create a simple mega menu with dropdown with two or more columns using only Elementor and CSS. No additional plugins required!

You can make symmetric or asymmetric columns and break the column at a desired place using the nth-child elements.

💻 Grab the CSS code here:

🚀 Interactive CSS Basics course for designers and non-coders:

👉 Get 20% off using the code VELVET20OFF at Checkout.

This solution applies to both Elementor Pro and FREE version.

PURCHASE AND DOWNLOAD ELEMENTOR PRO:

––––––––––––––––––––––––––––––

SIMPLE CUSTOM CSS AND JS PLUGIN:

To use custom CSS code with Elementor FREE, I am using the Simple Custom CSS and JS plugin for Wordpress that you can download here:

Have fun and thanks for watching!

If this tutorial helped you, please share or subscribe.

––––––––––––––––––––––––––––––

This video and description may contain affiliate links. If you click on a link and make a purchase, I will receive a commission from the sale. That way you are supporting my channel and allowing me to keep making videos and posts like this. I only promote products that I use, have experience with and support, such as Elementor Pro.

––––––––––––––––––––––––––––––

Have a specific problem in Elementor that you don't know how to solve with CSS? Comment below to let me know which video you would like to see next!

––––––––––––––––––––––––––––––

MUSIC:

Artist: Corbyn Kites
Track Title: Staycation

––––––––––––––––––––––––––––––

[cssexpresstutorials]

🚀 Interactive CSS Basics course for designers and non-coders:
👉 Get 20% off using the code VELVET20OFF at Checkout.

💻 Grab the CSS code for free here:

[christianking]

Thanks a lot for this tutorial. This is really helpful. Could you also point out how you achieved the sorting by categories? I would like to achieve a similar layout that automatically shows the third level <ul> under the second level. Elementor hides this with an inline display:none. How did you mange to achieve such a clean display?

[umairaziz]

@5:04 Please note that there is gap between the columns, Can we please remove this gap, how to update the CSS? Thank you

[amirzahari]

Hi, thanks for the video. How do I add a title for my columns ?

[iMariusMan]

Hi there, How I can do something like this but I need to slide on right side, bassicaly I want to have a menu in left side of main page then once I move over product category so slide at righ side a box as yours then have list of categoryes

[thomasho.]

the break-before: column is not supported on Firefox browser

[CMTgraphicscom]

Hi! Thank you for the video, when I put custom css
@media (min-width: 1024px) {
selector .elementor-nav-menu li
:nth-child(1) .elementor
-nav-menu--dropdown{
column-count: 2 !important;
}
}

but it appears error icons at left, can please type the code here as comment? Why this doesn't work?

[darsaafaanorma]

I have been looking for this for sometime now. Kindly share the code. Thank you.