DIVI, add menu on footer without collapsing on mobile.

DIVI, add menu on the footer, show the links vertical and without collapsing on tablet and mobile devices. It prevents also the submenus to be shown.

  1. Create a new custom footer on the Theme Builder
  2. Add an ID on the Footer section (my ID is awkFooter)
  3. Create a menu module and add a class (my class is footerNav)
  4. Add this css to style.css:
/* awkFooter */
#awkFooter .foterNav .et-menu {
  flex-direction: column;
  margin-left: 0;
  margin-right: 0;
}
#awkFooter .et_pb_menu .et_pb_menu__wrap {
  justify-content: center;
}
#awkFooter .foterNav .et-menu li {
  position: relative;
  padding-left: 15px;
}
#awkFooter .foterNav .et-menu li:before {
  content: "\45";
  font-family: eleganticons;
  left: 0;
  position: absolute;
  top: 2px;
  color: #fcb316;
}
#awkFooter .foterNav .et-menu ul.sub-menu {
    display: none;
}
#awkFooter .foterNav .et-menu .menu-item-has-children > a:first-child::after {
    display: none;
}
@media (max-width: 980px) {
  #awkFooter .et_pb_fullwidth_menu .et_mobile_nav_menu, .et_pb_menu .et_mobile_nav_menu {
    display: none;
  }
  #awkFooter .et_pb_fullwidth_menu .et_pb_menu__menu, .et_pb_menu .et_pb_menu__menu {
    display: block;
  }
  #awkFooter .et_pb_menu--style-left_aligned .et_pb_menu__wrap {
    justify-content: flex-start;
  }
  
}

The above code is adding also an Elegant Icon Font on links (ul > li) . To do that you must add first the Elegant icon fonts following this post: Add Elegant Icon Font to any Theme

Scroll to Top