js not connecting

[vivkay]

Hi @thomasjbradley,

I've been watching your javascript tutorials on making a toggle menu and debugging, and I've noticed that my js is not connecting. (At the mobile size, I want to click and toggle the ul in my nav).

I think this is the case because when I inspect my page in firefox, there are no files listed in the debugging tab in inspector. Also, the console.log won't spit out any variables when I test them.

I have the script tag linking to main.js in my html file. I'm not sure what else could be breaking the connection?

This is my html (I am using the button to toggle the .menu section, which controls the navigation's ul):

        <button class="btn" id="nav-icon3">
            <img src="http://placehold.it/20x20" alt="hamburger">
        </button>

   <nav class="top-nav grid">
      <div class="unit unit-xs-1 unit-s-1 unit-m-1 unit-l-1-4 unit-xl-1-4 grid-middle">
          <a class="logo" href="index.html">
            <img class="ffi-logo" src="img/logo-full.png" alt="Navigate Home">
          </a>
      </div>
      <div class="menu">
        <div class="unit unit-xs-1 unit-s-1 unit-m-1 unit-l-3-4 unit-xl-3-4">
            <ul class="grid-middle">
              <li><a href="about.html">About</a></li>
              <li><a href="initiatives.html">Initiatives</a></li>
              <li><a href="species.html">Species</a></li>
              <li><a href="blog.html">Blog</a></li>
              <li><a href="contact.html">Contact</a></li>
              <li><a href="donate.html" class="donate">Donate</a></li>
            </ul>
        </div>
      </div>
    </nav>

With this link at the bottom

<script src="js/main.js"></script>

And the CSS

.btn {
  display: inline-block;
}

.menu {
  display: none;
}

.js-menu-open {
  display: block;
}

And the JS

var $btn = $('.btn');
var $menu = $('.menu');
var name = 'hello';

$btn.on('click', function () {
  $menu.toggleClass('js-menu-open');
});

Any ideas?

Thanks!

Viv

[thomasjbradley]

It looks connected for me. But jQuery is missing and it's throwing an error saying so.

Also, in the Jekyll website, the config file needs an underscore in front of it like: _config.yml.

[vivkay]

awesome, it works! thanks!