After watching Chris Toomey’s awesome video on Middleman, I decided to try out a static site. I’m using Bourbon, Neat and Bitters, and in particular I’m using the navigation component provided by Refills.
After searching for various sticky header js libraries, I noticed that Upcase uses Headhesive.js, and so I decided to try it out. It works great except for one thing: it seems to break any javascript in the nav bar. For example, the MENU links do not expand/collapse properly.
My javascript abilities are not so stellar, but it appears to me that the problem lies with the fact that headhesive clones the nav bar. So by the time one would try to click any of the #js-mobile-menu links, there are actually two full <header> elements on the page, differing only in the classes which headhesive injects into its clone.
As I googled for possible workarounds, I found that another user had experienced a very similar problem using Bootstrap’s nav bar. Mark Goodyear (the author of headhesive) offered an explanation of the issue, and a JS Fiddle with a solution. His solution works perfectly for Bootstrap, but so far I have not been able to come up with any type of analogous solution for a Bourbon environment.
I’ve created a simple Middleman app on GitHub with all of the above-mentioned components installed. If you clone the app and fire up the server, you should be able to see the problem. When you first view the home page, the mobile menu links are broken. However, as you scroll down and headhesive’s clone bar drops into view, the mobile menu links work fine.
Hi joshukraine, I’m having the same issue and I’m not using Headhesive.js. The toggle functionality for the mobile navigation menu doesn’t seem to work.
@acandael I looked at the blog in the issue you linked and it might be that you don’t have jQuery required before your header in all.js, there’s an undefined $ on your page load in the console as well.
Thanks for the response. I think the issue you linked to on GitHub is more related to submenus on mobile. In my case, the problem is that the JS mobile menu does not work at all. Headhesive clones the header element, and because the JS provided by Refills targets ids (which are supposed to be unique), there is an ambiguity issue.
If you clone my repo and fire up the server, you’ll notice that while mobile links in the original nav bar do not respond, the clone created by headhesive does. I don’t think this is really a problem with Refills per se, but I’m curious to see if there is a way to get around it.