title: Avada Theme - Submenu customization
body: <p>I just started using the <a href="http://theme-fusion.com/avada_demos/agency/" rel="nofollow noreferrer">Avada Theme</a> in my wordpress site. I need to customize the menu on the left hand side. The items in the submenu should be shown below the parent item, not on next to it. I started by using the side-navigation css styles, but I can't get the child items to work.</p>
  
  <pre><code>.side-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #ededed;
    margin-bottom: 20px;
  }
  .side-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .side-nav li {
    margin: 0;
    padding: 0;
  }
  .side-nav li a {
    border-bottom: 1px solid #ededed;
    display: block;
    height: auto;
    font-weight: normal;
    font: 14px/39px 'MuseoSlab500Regular', arial, helvetica, sans-serif;
    color: #333333;
  }
  .side-nav li a {
    line-height: 1.69em;
    padding: 8px 0;
  }
  .side-nav li a:hover {
    background: none;
  }
  .side-nav li.current_page_item &gt; a {
    background: none;
    color: #a0ce4e;
  }
  .side-nav li.current_page_item li a {
    color: #333333;
    border-bottom: 1px solid #ededed;
  }
  .side-nav .children {
    display: none;
    margin-left: 15px;
  }
  .side-nav .arrow {
    display: inline;
    margin-left: 0;
  }
  .side-nav .arrow:after {
    position: absolute;
    font-size: 14px;
    font-family: IcoMoon;
  }
  .side-nav-left .side-nav {
    border-right: 1px solid #ededed;
  }
  .side-nav-left .side-nav li.current_page_item &gt; a {
    border-right: 3px solid #a0ce4e;
  }
  .side-nav-left .side-nav .arrow {
    margin-left: 10px;
  }
  .side-nav-left .side-nav .arrow:after {
    content: '\f105';
  }
  .side-nav-right .side-nav {
    border-left: 1px solid #ededed;
  }
  .side-nav-right .side-nav li.current_page_item &gt; a {
    padding-left: 23px;
    border-left: 3px solid #a0ce4e;
  }
  .side-nav-right .side-nav li a {
    padding-left: 25px;
  }
  .side-nav-right .side-nav .arrow {
    margin-right: 10px;
  }
  .side-nav-right .side-nav .arrow:after {
    content: '\f104';
  }
  .side-nav-right .side-nav .children {
    margin-left: 40px;
  }
  .side-nav-right .side-nav .children a {
    padding-left: 0;
  }
  </code></pre>
  
  <p>For better understanding here is a screenshot of what I try to build. 
  <img src="https://i.stack.imgur.com/simYr.jpg" alt="enter image description here">
  The Image on the left shows the current style of the menu / submenu. The image on the right is showing the side-navigation template which comes with Avada. Out of the Box it's not possible to use the side-navigation style in the main menu. I already posted a question in the Theme-Fursion forum, but they were not able to help me. Maybe you can give me a hint.
  Thank you</p>