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

3 Views

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

<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 :

Read More
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 : 

<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 : 

<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?

Post Views: 3

Related posts

Leave a Reply

1 comment

  1. You can do it in two ways.

    1) Simply go for the third party developed code here (its free too)

    2) If you want to make your own without any plugin, then u have to code something like below,
    Step 1: Add an extra CSS class (dropdown) in the parent pages CSS class
    U can add that extra CSS class here Appearance-> menus: there u find CSS Classes (optional)
    If u didn’t find it then, click screen option in the top right-hand corner (near help), there u can enable CSS classes, description, etc.,

    Step 2: the real code is here

    <nav class="navbar navbar-inverse logoname" role="navigation">
    <div class="navbar-header title">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
  <div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
    <?php 
    $menu_args = array(
      'menu'            => 'Main Menu', 
      'container'       => 'container', 
      'container_class' => 'container_class', 
      'container_id'    => 'container_id',
      'menu_class'      => 'nav navbar-nav',
      'menu_id'         => 'menu_id',
      'echo'            => true);
    ?>
    <?php wp_nav_menu($menu_args);?>
    </div>
</nav>

    Step 3: in footer inclde the following

    <script>
  $('.sub-menu').addClass('dropdown-menu'); 
</script>

    And finally, don’t forget to include the necessary bootstrap CSS and js and jquery

    PS: I hope u will go for the first method