WordPress Bootstrap multilevel Vertical Menu

Question

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.

<div class="container">
<div class="row">
<div class="col-sm-3">
  <div class="site-logo hidden-xs"><h2>Company Logo</h2></div>
<div class="sidebar-nav">
  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="visible-xs navbar-brand">Company Logo</span>
    </div>
    <div class="navbar-collapse collapse sidebar-navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Menu Item 1</a></li>
        <li><a href="#">Menu Item 2</a></li>
        <li><a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false">Dropdown <span class="pull-right"><b class="caret"></b></span></a>
        <ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">         
            <li><a href="#">Action</a></li>
            <li><a href="#" id="btn-2" data-toggle="collapse" data-target="#submenu2" aria-expanded="false">Sub-Dropdown <span class="pull-right"><b class="caret"></b></span></a>
            <ul class="nav collapse" id="submenu2" role="menu" aria-labelledby="btn-2">         
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li></ul>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
        <li><a href="#">Menu Item 4</a></li>
      </ul>
    </div><!--/.nav-collapse -->
     </div>
    </div>
  </div>
  <div class="col-sm-9">
    <p>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 </p>
</div>
</div>
</div>

JSFIDDEL

i used the navwalker by Edward github.com/twittem/wp-bootstrap-navwalker — Johny Santiago

stackingjasoncooper stackingjasoncooper · Accepted Answer · 2016-12-28T15:11:05

You can achieve the desired menu by removing floats from the Bootstrap navbar, and setting position: static on the dropdown menu, plus a few other styling tweaks.

Then you have to do a little JavaScript to get the nested dropdown menus to work.

Here is a JSFiddle.

JavaScript courtesy of W3Schools snippet.

WordPress Bootstrap multilevel Vertical Menu

1 Answers