How to Create a Vertical Navigation Menu

by Mar 17, 2021Projects, Tutorials0 comments

I’m working on a new website and I need to add a vertical menu in the footer.

I create the menu but when I insert the module menu I see that the voices are horizontal only.

Holy shit, how can I change this thing?


Add a custom CSS Class to the menu module as follows:

CSS Class: et-vert-menu

and than copy and paste this CSS:

.et-vert-menu .et_pb_menu__menu>nav>ul {
flex-direction: column;
margin-left: 0px !important;
margin-right: 0px !important;
width: 100%;
.et-vert-menu .et_pb_menu__menu>nav>ul>li {
margin: 10px 0 !important;
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul li {
display:block !important;
padding: 0px !important;
.et-vert-menu .et_pb_menu__menu>nav>ul ul {
padding: 0px !important;
top: 0px !important;
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul {
left:calc(100% - 1px) !important;
top:0px !important;

.et-vert-menu .nav li ul {
left: calc(100% - 1px) !important; /*align submenu to the right of menu link*/
@media all and (min-width: 981px) {
.et-vert-menu .et_pb_menu__menu, .et-vert-menu .et_pb_menu__menu>nav {
width: 100%; /*width of the vertical navigation menu*/


Easy or not?