CODEWITHSUNDEEP
htmlcsswordpresstwitter-bootstrap
Sandeep Siddanna Kumbar
Sandeep Siddanna Kumbar

Reputation: 57

How to add bootstrap dropdown to wordpress

I have designed a website using bootstrap framework, and now I am converting it to a wordpress website, the challenge to me is to make dropdown of navigations to appear as designed. I am able to get menus dynamically from wordpress, but I am not to get the dropdowns dynamically as per css style.

Here is my HTML code

<ul class="nav nav-justified menu_bac">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="company.html">Company</a></li>
<li><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
      Products <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      <li role="presentation" class="dropdown-submenu"><a>Grandstream</a>

      <ul class="dropdown-menu">
      <li role="presentation" class="dropdown-submenu"><a>IP-Multimedia <br/>Video Telephony</a>
      <ul class="dropdown-menu">
      <li><a href="gxv3275ipmultimedia phone.html">GXV3275 IP <br/>Multimedia phone</a></li>
      <li class="divider"></li>
      <li><a href="gxv3240multimediaipphone.html">GXV3240 IP <br/>Multimedia phone</a></li>


      </ul>
      </li>

Here is code which i have used to get menus dynamically

<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<?php wp_nav_menu(array('menu_class' => 'nav nav-justified','container_class' => 'menu_bac')); ?>
</div>
</div>

Would be great help if anybody can guide me to get dropdowns dynamically as per design?

Upvotes: 0

Views: 6940

Answers (5)

Jiwan
Jiwan

Reputation: 31

The easiest solution would be to use jquery in this case. You can add a new class in your functions.php file to check if the menu item has children and then add attributes to that item or use bootstrap nav walker as well. Here' I'm going with the easier one.

<pre>
<script>
    $(document).ready(function(){
        $("ul.sub-menu").parent().addClass("dropdown");
        $("ul.sub-menu").addClass("dropdown-menu");
        $("ul#menuid li.dropdown a").addClass("dropdown-toggle");
        $("ul.sub-menu li a").removeClass("dropdown-toggle"); 
        $('.navbar .dropdown-toggle').append('');
        $('a.dropdown-toggle').attr('data-toggle', 'dropdown');
    });
</script>
</pre>

Add this in your footer.php file and don't forget to enque the bootstrap css and js files.

Upvotes: 1

WP Learner
WP Learner

Reputation: 830

This can achieve with a nav walker. You can use this and follow these steps.

  1. Put navwalker (wp-bootstrap-navwalker.php) in your theme root
  2. Call to the navwalker in functions.php file. require_once('wp-bootstrap-navwalker.php');
  3. Create your menu in Wordpress Backend (Appearance -> Menus)
  4. In your menu area, in header.php
wp_nav_menu( array(
  'menu' => 'main_menu',
  'depth' => 2,
  'container' => false,
  'menu_class' => 'nav nav-justified',
  'walker' => new wp_bootstrap_navwalker())
);

`main_menu` is your menu name

Upvotes: 0

Dhanuka Nuwan
Dhanuka Nuwan

Reputation: 700

well, here is an answer with examples.Please note that this code is not tested. Please make a backup of your theme before you try this code.

I'll use the str_replace method.

echo str_replace('sub-menu', 'dropdown-menu', wp_nav_menu( array('theme_location' => 'primary', 'menu_class' => 'nav nav-justified menu_bac','container' => false,'echo' => false)));

the jquery to add classes and attributes to submenu li,

jQuery(document).ready(function() {
     jQuery('.dropdown-menu li').addClass('dropdown-submenu');
     jQuery('.dropdown-menu li').attr('role', 'presentation');
});

you need to define your theme_location inside the wp_nav_menu array. primary is the default one. if you made a custom nav menu use that one. otherwise your menu will not work.

I think this will help you. let me know if something wrong.

Upvotes: 0

Dhanuka Nuwan
Dhanuka Nuwan

Reputation: 700

Check this answer wp_nav_menu change sub-menu class name?

you can do it by adding a walker to your menu. and also there is an another answer on that question that uses str_replace. check that one too.

and also if you are not planing to wrap your main ul of the menu using a div or nav you need to set container attribute false.and add your menu_bac class to the menu_class attribute. so there will be 3 classes in that attribute.

to add attributes and classes to your submenu li, I think JQuery will be easy.It might not be the best solution. but you'll be able to work something out very easily.

Hope this will help.

Upvotes: 0

schliflo
schliflo

Reputation: 330

Use a custom nav walker to generate your menu. I prefer https://github.com/twittem/wp-bootstrap-navwalker - it's simple and it works flawless for me.

Upvotes: 0

Related Questions