Wordpress Menu + Bootstrap NavBar

Question

I'm now stuck with this problem below, and I hope you can help me out. I would really appreciate it.

1st -- I created the Wordpress Menu (got it all worked). 2nd -- I implemented the Bootstrap classes (e.g nav navbar-nav, dropdown, dropdown-menu etc..) on the html tags of the Wordpress Menu. (got it and made it work somehow) 3rd -- To make the dropdowns work I used (preg_place) to replace the default (submenu) to (dropdown-menu) then to make the function work I used the (preg-replace) again to INSERT a class and data-toggle to the Anchor Links.

Now the problem is, the anchor links doesn't seem to function right at all.

check it out here. (use the navs on top)

HEres the code on the function.php

function new_submenu_class($menu) {
$menu = preg_replace('/ class="sub-menu"/','/ class="dropdown-menu" /',$menu);  
return $menu;  
}
add_filter('wp_nav_menu','new_submenu_class');

function add_menuclass($ulclass) {
$ulclass = preg_replace('/<a/', '<a class="dropdown-toggle" data-toggle="dropdown" role="button"', $ulclass);
return $ulclass;
}
add_filter('wp_nav_menu','add_menuclass');

Thanks much guys!

And btw.. i used a jQuery for the 3rd level submenu. which is:

<script type="text/javascript">
$(document).ready(function() {
$('.navbar a.dropdown-toggle').on('click', function(e) {
var $el = $(this);
var $parent = $(this).offsetParent(".dropdown-menu");
$(this).parent("li").toggleClass('open');
if(!$parent.parent().hasClass('nav')) {
$el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4});
    }

    $('.nav li.open').not($(this).parents("li")).removeClass("open");

    return false;
});
});

</script>

Your sub navs have a drop-down toggle class, thats y they are not working — Masivuye Cokile
I don't exactly know how to fix your code, but you can take a look at: github.com/twittem/wp-bootstrap-navwalker — jurruh

Louys Patrice Bessette Louys Patrice Bessette · Accepted Answer · 2016-11-17T00:41:39

In the function, I would try to change this line:

$('.navbar a.dropdown-toggle').on('click', function(e) {

For this one:

$('.navbar').on('click', 'a.dropdown-toggle', function(e) {

Since a.dropdown-toggle has been happended...
Maybe it was not present on "document ready", so the "delagation" syntax could help.

Wordpress Menu + Bootstrap NavBar

1 Answers