All Collections
FAQ's and Troubleshooting
How To Make A Vertical Divi Menu
How To Make A Vertical Divi Menu

Create a stylish and functional vertical navigation menu with CSS

Goran Cajic avatar
Written by Goran Cajic
Updated over a week ago

To apply vertical orientation to a Menu Module follow these steps:

  1. 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.

  2. 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:

Did this answer your question?