How to add bootstrap menu,sub menu with custom css?

admin

Administrator
Staff member
I am developing a wordpress theme using bootsatrap my html structure is something like :

Code:
<div class="collapse navbar-collapse inner_collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav inner">
      <li><a href="brushes.html">BRUSHES</a></li>
      <li><a href="body.html">BODY</a></li>
      <li class="dropdown">
          <a href="blades.html" class="dropdown-toggle">BLADES</a>
          <ul class="dropdown-menu">
            <li><a href="#">Men</a></li>
            <li><a href="#">Woman</a></li>
          </ul>
      </li>
      <li><a href="beauty.html">BEAUTY</a></li>
      <li><a href="baby.html">BABY</a></li>
      <li><a href="pet.html">PET</a></li>
  </ul>


</div><!-- /.navbar-collapse -->

To integrate it in wordpress menu I used the code :

Code:
wp_nav_menu(array('theme_location' => 'navi', 'container' => 'false','menu_class' => 'nav navbar-nav inner', 'menu_id' => 'nav', 'echo' => 'true', 'fallback_cb' => 'themezee_default_menu', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'depth' => 0));

My problem is I want to add submenu and submenu related class like :

Code:
<li class="dropdown">
   <a href="blades.html" class="dropdown-toggle">BLADES</a>
   <ul class="dropdown-menu">
     <li><a href="#">Men</a></li>
     <li><a href="#">Woman</a></li>
   </ul>
</li>

My code is generating the code below :

Code:
<div class="collapse navbar-collapse inner_collapse" id="bs-example-navbar-collapse-1">
   <ul id="menu-main-menu" class="nav navbar-nav inner">
                                      <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46"><a title="Brushes" href="http://localhost/bassWorking/brushes/">Brushes</a></li>
                                      <li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a title="Body" href="http://localhost/bassWorking/body/">Body</a></li>
                                      <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-29 current_page_item menu-item-has-children menu-item-43 dropdown active"><a title="Blades" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Blades <span class="caret"></span></a>
                                            <ul role="menu" class=" dropdown-menu">
                                                <li id="menu-item-342" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-342"><a title="Men" href="#">Men</a></li>
                                                <li id="menu-item-343" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-343"><a title="Women" href="#">Women</a></li>
                                            </ul>
                                      </li>
                            <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a title="Beauty" href="http://localhost/bassWorking/beauty/">Beauty</a></li>
                            <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a title="Baby" href="http://localhost/bassWorking/baby/">Baby</a></li>
                            <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a title="Pet" href="http://localhost/bassWorking/pet/">Pet</a></li>
   </ul>                                      
</div><!-- /.navbar-collapse -->

Any idea?