Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Rob Kidd
Rob Kidd
10,734 Points
Posted by Rob Kidd
Rob Kidd
10,734 Points

Bootstrap Wordpress theme - small screen dropdown menu toggles down, but doesn't toggle back up

Hi, I've recently completed the Bootstrap for Wordpress course. All was working fine, and I've begun customising the theme for my first client. The toggle menu button on small screens drops down the menu, but doesn't pull it back up again, meaning the menu is fixed in place until you choose an option. Any ideas what I might have done wrong?

Thanks!

3 Answers

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

The jQuery version that is included with WordPress is actually in noConflict mode by default so it doesn't alias the jQuery object with $. There could then be a conflict with the Google-hosted version since it's not in noConflict mode. If you're using the one built into Wordpress you can just pass $ as an attribute when you run your jQuery code. For example:

jQuery(function ($) {
  $('...')....
});
Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Rob, sometimes that happens if the bootstrap.js file isn't loading right. Can you confirm that it's loading the bootstrap.js file? Any chance theres an accessible address that can be looked at?

Rob Kidd
Rob Kidd
10,734 Points
Rob Kidd
Rob Kidd
10,734 Points

Hi Tim,

I had another look (after sleeping on it) at my files. I have found that deleting this line:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

from my footer.php file, the problem is fixed. I have one copy of jQuery being served locally, via my functions.php, and another from Google APIs as a fallback. So I guess that means that the Google-hosted version of jQuery was conflicting with the file I'm serving locally? Not really sure why that would be - grateful for any insight!