Zurb Foundation top-bar menu not working on mobile display

Question

I am using the Zurb Foundation framework on a Wordpress site. The problem that I am having is with the responsive top-bar. When it goes into its mobile mode the menu doesnt work. It will not drop down on click. I have download their html templates, copied the code exactly and still it does not work.

Does anyone know how to fix it.

Answer 1

I don't think you include the required javascripts for the TopBar component. I couldn't find it in your code.

Either reference foundation.min.js or jquery.foundation.topbar.js

Then you must initialize the menu with

$(document).foundationTopBar() 

Answer 2

Try loading foundation on DOM Ready.

$(function() {
    $(document).foundation();
});

Answer 3

使用zurb-foundation-4.0.9，您需要将此行添加到您的html代码中：

<script type="text/javascript" src="javascripts/vendor/custom.modernizr.js"></script>

Answer 4

try to remove that part then test it. i have my site running on foundation 3. and the top bar is working. i had this issue before. do not include app.js when you are converting your html theme to wordpress theme.

Remove this

<script type="text/javascript" src="http://pinetowncpf.co.za/wp-content/themes/PinetownCPF/js/app.js"></script>

then test

regards eric