Navwalker - Issue with menu toggle expand

[josephborg07]

I've decided to move to the navwalker bootsrap menu on my wordpress site, and started testing the new menu on my development site rather than directly on the live site. Once done I'v copied everything from my development to my live site and everything works except for the expand toggle.

Navbar code in header:

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <?php /* Primary navigation */
            wp_nav_menu( array(
              'menu' => 'top_menu',
              'theme_location' => 'primary',
              'depth' => 2,
              'container' => false,
              'menu_class' => 'nav navbar',
              //Process nav menu using our custom nav walker
              'walker' => new wp_bootstrap_navwalker())
            );
            ?>
        </div><!-- /.navbar-collapse -->

Any help is greatly appreciated as fixes from other pages failed to work.

Thanks in advance,
J

[LouisMilotte]

toggle requires jquery and bootstrap js library; did you remember to include them and have the proper path included?

[josephborg07]

Thanks for your reply @LouisMilotte .

The code to include bootstrap items follow below:

function wpt_register_js() { wp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', 'jquery'); wp_enqueue_script('jquery.bootstrap.min'); } add_action( 'init', 'wpt_register_js' ); function wpt_register_css() { wp_register_style( 'bootstrap.min', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' ); wp_enqueue_style( 'bootstrap.min' ); } add_action( 'wp_enqueue_scripts', 'wpt_register_css' );

This is my first experience with both wordpress and navwalker so feel free to point out any mistakes with my code

Thanks and regards,
J

[LouisMilotte]

I don't see the jquery library in there; only the bootstrap one.

https://codex.wordpress.org/Function_Reference/wp_register_script

WP Has a handle for jquery pre-registered;

the loading should be:

1. jQuery-(x version).js
2. bootstrap.min.js

[josephborg07]

Thanks for your reply @LouisMilotte .

Is it possible to provide instructions on where the jquery handle should be quote ?

Regards,
J

[LouisMilotte]

Change the third argument of wp_register_script()

from:

<?php 
wp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', 'jquery'); 
?>

to:

<?php 
wp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array('jquery')); 
?>

See http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Default_scripts_included_with_WordPress for how to add dependencies to scripts and pre-load them.

[josephborg07]

Thanks for your reply.

I did update that however the expand on toggle still doesn't work :(.

Regards,
J

[LouisMilotte]

Would you link your page please?

[pattonwebz]

Seeing a live page would be very beneficial to help solve this.

On 19:19, 8 Nov 2015, at 19:19, LouisMilotte notifications@github.com wrote:

Would you link your page please?

---

Reply to this email directly or view it on GitHub:
#201 (comment)

[josephborg07]

firesafe.com.mt

[pattonwebz]

Hey @josephborg07

When I visit the site you linked I'm able to make the toggle work. Have you changed something in the last half hour that would have made it start working?

Before:

After:

Perhaps there was a caching issue that made your browser hold the old (not working) version from prior to you making the changes that enqueued jQuery?

[josephborg07]

Thanks @pattonwebz for looking into my problem.

I am able to expand the main toggle button and show the first level of menu links, however I don't manage to expand the second layer of menu links (Sub menu).

Thanks in advance.

[pattonwebz]

Ahh ok I see what is the problem now, I wasn't clear on it before. Let me check again once I have a moment and I'll see if there's something I can spot.

[josephborg07]

Thanks for your help @pattonwebz

I'll wait for your reply.

[josephborg07]

Has anyone got to the bottom of this please ?

[pattonwebz]

Apologies @josephborg07, I have yet to find the time to look closely
into the matter. What I did notice was that in desktop view the dropdown
menus appear on 'hover' - rather than with the default of on 'click'.
Bootstrap menus are specifically made to work with click because hover
is not really all that touch-friendly.

My only guess, based on the little time I have had to investigate, is
that whatever adds the hover ability is also doing something to prevent
other functions from firing too. I haven't looked to see what makes
dropdowns work on hover. Was that something you intentionally made
happen? How is it done?

On 09/11/15 02:52, josephborg07 wrote:

Has anyone got to the bottom of this please ?

—
Reply to this email directly or view it on GitHub
#201 (comment).

[josephborg07]

@pattonwebz

Yes the on hover is intentional feature added through CSS. The thing is only the on click doesnt work (triggered through jquery).

Another thing I've tested further is, on my dev environment everything works (tested on several instances using Windows 7 and wamp). It's when I move the site to the live environment that it stops working; not sure if it changes anything.

Thanks,
J

[josephborg07]

Hi Guys,

Solved the issue. It was a mistake from my end as bootstrap was not referenced properly.

This is how it was initially referenced (wrong)
function wpt_register_js() { wp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', 'jquery'); wp_enqueue_script('jquery.bootstrap.min'); } add_action( 'init', 'wpt_register_js' ); function wpt_register_css() { wp_register_style( 'bootstrap.min', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' ); wp_enqueue_style( 'bootstrap.min' ); } add_action( 'wp_enqueue_scripts', 'wpt_register_css' );

This is how it should have been referenced (working):
function wpt_register_js() { wp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery'); wp_enqueue_script('jquery.bootstrap.min'); } add_action( 'init', 'wpt_register_js' ); function wpt_register_css() { wp_register_style( 'bootstrap.min', get_template_directory_uri() . '/css/bootstrap.min.css' ); wp_enqueue_style( 'bootstrap.min' ); } add_action( 'wp_enqueue_scripts', 'wpt_register_css' );

The main difference was that the path was /bootstrap/js/bootstrap.min.js when it should have been /js/bootstrap.min.js.

I still would like to thank you for promptly trying to help me with my issues.

Regards,
J