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.
#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.
Thanks in advance for any assistance!