Menu icon Foundation
Title-Bar Menu with Toggle Fails on Only One Page

I am using a title-bar with a toggle on each page of my site (except for the home page). It works perfectly on every page except one, although the coding is cut/paste and not unique to that page. On a small screen, the title-bar shows as expected, but tapping the menu icon produces a slight change in appearance, so the tap is recognized, but nothing happens - the toggled menu should appear as a vertical menu below the title-bar. I suspected interference with the Google Maps js on the page, but I've even commented out the Google code and still have the problem. If someone could look at this page and figure out what I'm doing wrong, I'd really appreciate it. Page is at http://test.pcvsoftware.net/christlutheran/contact.html

title-bar toggle

I am using a title-bar with a toggle on each page of my site (except for the home page). It works perfectly on every page except one, although the coding is cut/paste and not unique to that page. On a small screen, the title-bar shows as expected, but tapping the menu icon produces a slight change in appearance, so the tap is recognized, but nothing happens - the toggled menu should appear as a vertical menu below the title-bar. I suspected interference with the Google Maps js on the page, but I've even commented out the Google code and still have the problem. If someone could look at this page and figure out what I'm doing wrong, I'd really appreciate it. Page is at http://test.pcvsoftware.net/christlutheran/contact.html

Brandon Arnold over 3 years ago

Looks like you're getting a JS error from the map, that could be disabling your offcanvas js.

Paul Vollmar over 3 years ago

If you mean the message:

SensorNotRequired: https://developers.google.com/maps/documentation/javascript/error-messages

that's just a warning; the Google docs say it would not produce an error, and I just tried it after modifying the code and it made no difference.

Brandon Arnold over 3 years ago

Ah ok, I also noticed your app.js is initializing Foundation and then you're initializing Foundation again under it. That COULD have something to do with it.

Paul Vollmar over 3 years ago

Thank You! That was the problem, caused by two mistakes on my part. First, I had copied the skeleton for that page from a Foundation 5 project I had just finished, so it included the specific initialization script at the bottom. Second, I must have missed the part in the Foundation 6 documentation that noted that app.js included the initialization function. When I downloaded 6, I just copied the files to my server and started coding. I'm waiting for the Foundation 6 migration document to come out -- or did I miss that, too?

Thanks again.