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?
Easy!
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?