I have a dropdown menu called information that works on the first click load... But then when I switch to another page and try to make the dropdown load it doesn't. Any ideas?
The "Information page" has the dropdown.
Here is my html:
<div class="ma-subnav__item" data-turbolinks="false">
<div class="content" data-turbolinks="false">
<ul class="normal-ul" data-turbolinks="false">
<li class="dropdown" data-turbolinks="false">
<a href="#" data-turbolinks="false" class="link-reset" data-toggle="dropdown">Information <i class="icon-arrow"></i></a>
<ul class="dropdown-menu" data-turbolinks="false">
<li><%= link_to "Why", welcome_why_path, class: "link-reset" %></li>
<li><%= link_to "How", welcome_how_path, class: "link-reset" %></li>
<li><%= link_to "Resources", welcome_resources_path, class: "link-reset" %></li>
<li><%= link_to "Contact Us", welcome_feedback_path, class: "link-reset" %></li>
</ul>
</li></ul>
</div>
</div>
My css is fine:
It loads just not when you switch between pages!
It looks like you are only applying the dropdown behaviour on the first page load. You will need to apply the behaviour on turbolinks:load
$(document).on('turbolinks:load', function () {
var dropdown = document.querySelectorAll(".dropdown");
// … the rest
})
You do not need the data-turbolinks attributes.