Divi – horizontal sub menu

To create the submenu as in this screenshot:

  1. Dashboard > Appearance > menus > Create new menu > add menu items
  2. Dashboard > Appearance > widgets > Create new widget area
  3. Dashboard > Appearance > widgets > (reload page to load new widget area) >  Add Navigation menu to widget area
  4. Go to page > Divi builder
  5. Add section > spacing > padding > top = 0px, bottom = 0px
  6. Add row > spacing > padding > top = 14px, bottom = 14px
  7. Add module >sidebar > Select new widget area
  8. Sidebar module > advanced > CSS ID and Class > CSS class > add “horz-menu”
  9. Sidebar module > design > Text > Text Alignment > right
  10. Sidebar module > design > Layout > Show Border separator > no
  11. Save the Section to library to use for other subpages
  12. Dashboard > Divi > Theme Options > Custom CSS > add the following snippet

 

.horz-menu li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
.horz-menu li:last-child {
padding-right: 0px;
}
.et_pb_gutters3 .et_pb_column_4_4 .horz-menu .et_pb_widget {
width: 100%;
margin-right: 0px;
margin-bottom: 0px;
}
.horz-menu .current-menu-item {
font-weight: bold;
}
.et_pb_bg_layout_light.horz-menu .et_pb_widget li.current-menu-item a {
color: #b8b6b6;
}

Last updated: October 14th, 2020

Creative Commons Licence
Divi – horizontal sub menu by actionskills.co is licensed under a Creative Commons Attribution 4.0 International License.
https://actionskills.au/resource/divi-horizontal-sub-menu/.