Menu icon Foundation
top-bar disappears

I have put in a very basic top-bar using the examples provided for Foundation 5. The first time you click on a menu link it works fine. However, when I click on one that has already been clicked, the underlying page loses its banner image. After clicking links on the menu a few times, the menu stops working altogether on any page. I've searched through all the other questions/replies and looked at code for other ways to set up mine, but I don't see anything particularly "tricky" about this code so don't understand why it isn't refreshing the page. 

If I click "Reload" or "Refesh" the menu reappears and functions again. Is there something going on in terms of the page refresh perhaps? I don't know much about jquery (like - nothing!) and so I just don't know how to even get started. Each of my pages invokes foundation $document.foundation(); and I've put the top-bar foundation js where suggested.

Any thoughts on what could be causing this? or how I could trouble-shoot? 

top-barrefresh problemdisappearing navigationdisappearing top-bar

I have put in a very basic top-bar using the examples provided for Foundation 5. The first time you click on a menu link it works fine. However, when I click on one that has already been clicked, the underlying page loses its banner image. After clicking links on the menu a few times, the menu stops working altogether on any page. I've searched through all the other questions/replies and looked at code for other ways to set up mine, but I don't see anything particularly "tricky" about this code so don't understand why it isn't refreshing the page. 

If I click "Reload" or "Refesh" the menu reappears and functions again. Is there something going on in terms of the page refresh perhaps? I don't know much about jquery (like - nothing!) and so I just don't know how to even get started. Each of my pages invokes foundation $document.foundation(); and I've put the top-bar foundation js where suggested.

Any thoughts on what could be causing this? or how I could trouble-shoot? 

Jarryd Fillmore 6 months ago

Would love to know this too!

Sherry Bradford 6 months ago

I found a "partial" solution. I had two versions of jquery in my code. I don't know enough about jquery to be able to troubleshoot very well, but I did work in the Chrome browser developer areas and found that one of those jquery files was behaving badly with the overall site theme (not controlled by me) and throwing an error. I removed the jquery causing the issue and that allowed the menu links to all work. It had some other minor impacts when I removed it, but all my primary foundation code worked OK (things like the accordion, sliders, etc.)

Insofar as the image, I had a "hero" style background image with an overlay of text that we change often. I tried different things with updating that area and ultimately went with just a straight banner image rather than hero and made the text part of the banner. That isn't a good solution for us but it did resolve the issue. My expectation is that, if I knew enough about jquery and javascript and CSS, I could have found a solution. I'm fair at CSS and javascript, but know nothing about jquery.

This menu is a temporary need for us so after spending two days getting it to work and deploying across multiple pages, I'm going to have to be happy with it working "as is". I suspect my question will not get other replies as it is about Foundation 5 and top-nav - and so many people have moved on to Foundation 6 and more refined nav options. But I'm grateful for the resources here and ultimately some of those helped me to find a way to work around this at least!