Vertical Mega Menu - Elementor Pro CSS

A limitation of the Mega Menu widget inside Elementor Pro is that you can't set it to be Vertical.

Now you can!

CSS Code for a Menu inside a 700px Boxed Width Container:
.vertical-menu .e-n-menu-heading {
display: flex;
flex-direction: column;
height: 150px;
background-color: transparent;}

.vertical-menu .e-n-menu-title {width:150px;}

.vertical-menu .e-con-inner {
margin-top: -150px;
max-width: 482px;}

CSS Code for a Menu inside a Full Width Container:
.vertical-menu2 .e-n-menu-heading {
display: flex;
flex-direction: column;
height: 150px;
background-color: transparent;}

.vertical-menu2 .elementor-element.e-con-full.e-flex.e-con.e-child.e-active {margin-top: -150px;
margin-left: 160px;}

[QuaverloveStudio]

Nice one, Imran. Once again, you made me think.

To get the chevrons to line up if, as in your example at 6:14, the titles are different length, I've added this rule to your code:

.vertical-menu .e-n-menu-dropdown-icon {
margin-inline-start: auto !important;
}

Works great!
Thanks again, Imran.

[phkoon]

Hello there, Imran!
The way I did it, basically only two rules needed:


.vertical-menu {

/* Set it to Vertical */
& ul.e-n-menu-heading{
flex-direction: column;
}

/* Remove horizontal margin from menu items */
& li.e-n-menu-item {
margin-inline-end: 0 !important;
}

}

[caknuckler]

Excellent. i think i skipped your vid about dynamic data in mega menu so instead of asking "how do I" i just tried a test page with a loop grid for a custom post with an image and title to show a "product image" and title in mega menu. Its not really a product I guess, sort of but yes, genius. Me I mean. ok I'm kidding. Imran da bomb

[JohnXWayne]

How would you create a menu for a knowledge base?