CODEWITHSUNDEEP
phpjquerywordpresstwitter-bootstrap-3
kadong
kadong

Reputation: 11

Wordpress Menu + Bootstrap NavBar

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>

Upvotes: 1

Views: 393

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

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.

Upvotes: 0

Related Questions