Menu icon Foundation
Toggle Menu Not Working

Thanks in advance for any help, new to foundation and using it for my first project and loving it so far!

I tested a responsive design locally and menus toggle and everything works fine. I uploaded that basic HTML page here:
http://invexdesign.com/gpd-responsive/secondary.html

However, when I integrated the same code into my Wordpress theme, the menu icon no longer triggers any toggle. You can see that here: http://www.glenviewparks.org/fitness-center (basically the same page as above, just on the WP site)

I think this has something to do with a JavaScript/jQuery conflict, but don't know for sure. Inspecting the source code, I see that on the working example, the class 'expanded' is added to the nav element. On the WP site though, that class isn't added when the menu icon is clicked.

Also, there are attributes stripped from the nav element. On the working site, even though I write the element the same way in each site's cource code, inspecting the source code shows that "data-topbar" and "role='navigation'" are stripped out on the WP site (sample code included).

Sorry if this is long-winded, just really stuck here. Let me know if you more info is needed. Thanks again in advance for anyone who can offer any help!

<!--- Working Example HTML Code -->
<nav class="top-bar" data-topbar role="navigation">
            
<!--- Wordpress HTML Code, even though its written above in the theme file -->
<nav class="top-bar">
              

menutoggleexpandjavascriptjquery

Thanks in advance for any help, new to foundation and using it for my first project and loving it so far!

I tested a responsive design locally and menus toggle and everything works fine. I uploaded that basic HTML page here:
http://invexdesign.com/gpd-responsive/secondary.html

However, when I integrated the same code into my Wordpress theme, the menu icon no longer triggers any toggle. You can see that here: http://www.glenviewparks.org/fitness-center (basically the same page as above, just on the WP site)

I think this has something to do with a JavaScript/jQuery conflict, but don't know for sure. Inspecting the source code, I see that on the working example, the class 'expanded' is added to the nav element. On the WP site though, that class isn't added when the menu icon is clicked.

Also, there are attributes stripped from the nav element. On the working site, even though I write the element the same way in each site's cource code, inspecting the source code shows that "data-topbar" and "role='navigation'" are stripped out on the WP site (sample code included).

Sorry if this is long-winded, just really stuck here. Let me know if you more info is needed. Thanks again in advance for anyone who can offer any help!

<!--- Working Example HTML Code -->
<nav class="top-bar" data-topbar role="navigation">
            
<!--- Wordpress HTML Code, even though its written above in the theme file -->
<nav class="top-bar">
              
Rafi Benkual almost 5 years ago

The fact that data-topbar has been removed is why the menu wont work. That is what triggers the JS. Anyone know why this happens in WP?

Ulrich almost 5 years ago

Hello Invex,
whats with drop-down.js thats included in the head?
And where is the foundation js?

Invex09 almost 5 years ago

Thanks for the replies

@Ulrich
The drop-down.js file is to make the dropdowns compatible with IE6 by adding an .sfhover class to LI tags on hover. I tried commenting it out and it still doesn't work. Foundation.min.js is in the /js directory but the demo Foundation page didn't have it included (it only linked to modernizr.js so I just left it that way. I also tried adding it in before writing this reply and it didn't make a difference. Any other thoughts?

Ulrich almost 5 years ago

Invex,
the demo you linked to has this at the end of the main document:

<script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>

and without foundation.js and initializing foundation(), you wont get any results.

BTW, Foundation does not even support IE8, so i guess there's no real point in using Foundation for something that has to run in IE6.
There is a thread on this forum that describes how to get most of Foundation to work in IE8.
(It can be done in parts, i needed to this for a client myself)

If you use WordPress, i recommend https://github.com/olefredrik/foundationpress/
This Theme has custom navWalkers etc tailored for Foundation.

Good luck with InternetExploder6 ;)

Invex09 almost 5 years ago

Figured it out and it was just me being stupid and missing something. I didn't load 'foundation.js' and then didn't run the foundation() function on the page load. These were included at the very end of the sample page and I missed copying them to WP. Thanks for everyone that chimed in offering help!

Barbara Linda about 1 year ago

Move a mountain http://webstarts.com of filthy washing with this Best Hitachi Washer Dryer high-capacity design Washer And Dryer Guide which could wash a magnificent kg of washing Washer and Dryer Sets and clean as well as completely click to read more dry kg of clothes in one go.