To apply vertical orientation to a Menu Module follow these steps:
Go to the Menu module -> Advanced tab -> CSS Class and add a new CSS class. In our example, we will use the et_custom_vertical_menu CSS class.
For more details on how to add a custom CSS class, you can also visit this article: How To Add Additional CSS Classes To Divi Modules.
Insert this CSS code into Divi > Theme Options > Custom CSS box and click the green "Save Changes" button to save changes:
/* Start vertical Menu Module */
.et_custom_vertical_menu .et_pb_menu__menu nav ul li a:hover {
opacity: 1!important;
color: #FFFFFF;
background: #0054A4;
border-color: #0054A4;
}
.et_custom_vertical_menu ul li a:before {
font-family: 'ETMODULES';
content: '\24';
text-align: center;
vertical-align: middle;
margin-right: 9px;
margin-left: 0px;
color: #0074E4;
font-size: 1.2em;
transition: all .75s ease;
}
.et_custom_vertical_menu .et_pb_menu__menu nav ul li a {
padding: 20px!important;
background: #FFD700;
border-radius: 5px;
border: 2px solid #0074E4;
}
.et_custom_vertical_menu .et_pb_menu__menu nav ul li.current-menu-item a {
opacity: 1!important;
color: #FFD700;
background: #0054A4;
border-color: #0054A4;
}
.et_custom_vertical_menu .et_pb_menu__menu nav ul li {
display: block;
width: 100%;
margin: 10px 0;
}
.et_custom_vertical_menu .et_pb_menu__menu .menu-item-has-children .menu-item-has-children>a:first-child:after {
padding: 10px !important;
right: 0px !important;
}
.et_custom_vertical_menu ul li.current-menu-item a:before {
margin-left: 7px;
color: #FFFFFF!important;
}
.et_custom_vertical_menu .et_pb_menu__menu nav ul li ul {
top: 0!important;
}
.et_custom_vertical_menu .et_pb_menu__menu nav ul li a:before {
content: "5" !important;
padding: 20px;
font-size: 26px;
}
.et_custom_vertical_menu .et_pb_menu__menu nav li ul {
left: 100%!important;
}
.et_custom_vertical_menu .et-menu > li {
padding-left: 0px;
padding-right: 0px;
}
/* End vertical Menu Module */As a result, the Menu Module will show as a vertical menu, as seen in the screenshot below:
