SlickNav responsive menu not appearing
<p>I was trying to add slicknav responsive menu on my site, but it doesn't appear. I followed the instructions on homepage.</p>

<p>My html</p>

<pre><code>&lt;div class ="container-fluid" &gt;
    &lt;div class="row"&gt;
        &lt;div class="hidden-sm col-md-1 col-lg-2"&gt;&lt;/div&gt;
        &lt;ul class="col-sm-12 col-md-10 col-lg-8" id="menubar"&gt;
            &lt;li&gt;&lt;a href="{{ root }}"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="{{ root }}blog"&gt;Blog&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="{{ root }}projects"&gt;Projects&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="{{ root }}bio"&gt;Bio&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class="hidden-sm col-md-1 col-lg-2"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>And css</p>

<pre><code>.slicknav_menu {
    display:none;
}

@media screen and (max-width: 40em) {

    .js #menubar {
        display:none;
    }

    .js .slicknav_menu {
        display:block;
    }
}
</code></pre>

<p>All the js is loaded in the bottom of the page like this</p>

<pre><code>&lt;script src="http://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script type="text/javascript" scr="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;script src="js/jquery.slicknav.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(function(){
    $('#menubar').slicknav();
});
&lt;/script&gt;
</code></pre>

<p>Here's my code in JSFiddle <a href="https://jsfiddle.net/w1gudnn8/" rel="nofollow">https://jsfiddle.net/w1gudnn8/</a></p>