title: WordPress Bootstrap multilevel Vertical Menu
body: <p>I am working on two column bootstrap based WordPress theme where i want to implement multilevel Vertical menu.. After trying for hours somehow i have achieved success in creating responsive multilevel vertical menu in HTML/CSS for which i have shared the code below. I want to implement it in WordPress nav-menu. The issue that i am facing is the sub-menu overlaps the parent menu links in bottom instead of working just like the html code that i have created and added. I know i need to work with navwalker which i tried but was unable to get success. Can you please tell me how can i achieve the same menu functionality as per the given code in WordPress nav-menu.</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-sm-3"&gt;
    &lt;div class="site-logo hidden-xs"&gt;&lt;h2&gt;Company Logo&lt;/h2&gt;&lt;/div&gt;
  &lt;div class="sidebar-nav"&gt;
    &lt;div class="navbar navbar-default" role="navigation"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;span class="visible-xs navbar-brand"&gt;Company Logo&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="navbar-collapse collapse sidebar-navbar-collapse"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;Menu Item 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Menu Item 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false"&gt;Dropdown &lt;span class="pull-right"&gt;&lt;b class="caret"&gt;&lt;/b&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1"&gt;         
              &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" id="btn-2" data-toggle="collapse" data-target="#submenu2" aria-expanded="false"&gt;Sub-Dropdown &lt;span class="pull-right"&gt;&lt;b class="caret"&gt;&lt;/b&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;ul class="nav collapse" id="submenu2" role="menu" aria-labelledby="btn-2"&gt;         
              &lt;li&gt;&lt;a href="#"&gt;Submenu 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Submenu 2&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
              &lt;li class="divider"&gt;&lt;/li&gt;
              &lt;li class="dropdown-header"&gt;Nav header&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Menu Item 4&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
       &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-sm-9"&gt;
      &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown &lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/johnysntg/r9qd973f/" rel="nofollow noreferrer"><strong>JSFIDDEL</strong></a></p>