Menu icon Foundation
Mobile Menu Not Working

I think I just need a second set of eyes after trying so many things for so long, I can't figure this one out. I had it working at one point, now I can't get it to work at all.

I have uploaded the Foundation 5 "/js" directory replacing the link to the modernizr file too, otherwise everything else was used from foundation 4 files (hope that's all I needed to do to upgrade). I only did that because the menu wasn't working though, but there's no change.

When I resize the browser, click on the Menu toggle button, nothing happens. The regular dropdowns are working, just not the mobile menu.

BTW this is a custom WP theme, so I have the following code in the functions.php file (pasted it below) - this loads the scripts into the head. The extra "flowtype.js" file was something I was trying to make the font sizes resize. I tried removing that too, just to see if there was a conflict, but no change.

Then in the footer file, I have that second chunk of code (also pasted below). I had to add the script type since I was seeing errors in Firefox. That stopped the errors. I tried removing it anyway, and that didn't fix the issue either.

Then in the header, I have the nav code (pasted below). WP adds a bunch of extra css automatically, I haven't had time to figure out how to remove it yet, but the menu was working regardless at one point. I think I tweaked it out of existence somehow.

I'm missing something I guess, I just can't figure out what it is. Been staring at this for too long I think :)

Anyone know what else I could check?

Thanks!

if( !is_admin()){

function your_whole_nutrition_scripts() {
    wp_enqueue_style( 'ywn_stylesheet', get_stylesheet_uri() );
	wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/modernizr.js');
	wp_enqueue_script( 'foundation_min', get_template_directory_uri() . '/js/foundation.min.js');
	wp_enqueue_script( 'flowtype', get_template_directory_uri() . '/js/flowtype.js');
}

add_action( 'wp_enqueue_scripts', 'your_whole_nutrition_scripts' );
}

  <script type="javascript">
    $(document).foundation();
  </script>

<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="logo"><a href="http://mywebsite.com/">Your Whole Nutrition</a></li>
<li class="toggle-topbar"><a href="#"><span>menu</span></a></li>
</ul>
<section class="top-bar-section">

<ul id="menu-main-menu" class="right"><li id="menu-item-69" class="has-dropdown menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-69"><a href="http://mywebsite.com/about/">About</a>
<ul class="sub-menu">
    <li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="http://mywebsite.com/press-and-media/">Press and Media</a></li>
</ul>
</li>
<li id="menu-item-75" class="has-dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-75"><a href="#">Services</a>
<ul class="sub-menu">
	<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"><a href="http://mywebsite.com/consultations/">Consultations</a></li>
	<li id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-107"><a href="http://mywebsite.com/nutritional-supplements/">Nutritional Supplements</a></li>
	<li id="menu-item-108" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-108"><a href="http://mywebsite.com/gluten-sensitivity/">Gluten Sensitivity</a></li>
	<li id="menu-item-109" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-109"><a href="http://mywebsite.com/bio-identical-hormones/">Bio-Identical Hormones</a></li>
	<li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78"><a href="http://mywebsite.com/lab-tests/">Lab Tests</a></li>
	<li id="menu-item-79" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-79"><a href="http://mywebsite.com/speaking-presentations/">Speaking &#038; Presentations</a></li>
	<li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a href="http://mywebsite.com/corporate-wellness/">Corporate Wellness</a></li>
</ul>
</li>
<li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70"><a href="http://mywebsite.com/new-clients/">New Clients</a></li>
<li id="menu-item-72" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-72"><a href="http://mywebsite.com/blog/">Blog</a></li>
<li id="menu-item-101" class="has-dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-101"><a href="#">Resources</a>
<ul class="sub-menu">
	<li id="menu-item-105" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-105"><a href="http://mywebsite.com/our-journey-with-food/">Our Journey With Food</a></li>
	<li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-102"><a href="http://mywebsite.com/e-books/">E-Books</a></li>
	<li id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-103"><a href="http://mywebsite.com/e-newsletter/">E-newsletter</a></li>
	<li id="menu-item-106" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-106"><a href="http://mywebsite.com/recommended-reading/">Recommended Reading</a></li>
	<li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-104"><a href="http://mywebsite.com/links/">Links</a></li>
</ul>
</li>
<li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73"><a href="http://mywebsite.com/contact/">Contact</a></li>
</ul>
</section>
</nav>

topbarmenu-icon

I think I just need a second set of eyes after trying so many things for so long, I can't figure this one out. I had it working at one point, now I can't get it to work at all.

I have uploaded the Foundation 5 "/js" directory replacing the link to the modernizr file too, otherwise everything else was used from foundation 4 files (hope that's all I needed to do to upgrade). I only did that because the menu wasn't working though, but there's no change.

When I resize the browser, click on the Menu toggle button, nothing happens. The regular dropdowns are working, just not the mobile menu.

BTW this is a custom WP theme, so I have the following code in the functions.php file (pasted it below) - this loads the scripts into the head. The extra "flowtype.js" file was something I was trying to make the font sizes resize. I tried removing that too, just to see if there was a conflict, but no change.

Then in the footer file, I have that second chunk of code (also pasted below). I had to add the script type since I was seeing errors in Firefox. That stopped the errors. I tried removing it anyway, and that didn't fix the issue either.

Then in the header, I have the nav code (pasted below). WP adds a bunch of extra css automatically, I haven't had time to figure out how to remove it yet, but the menu was working regardless at one point. I think I tweaked it out of existence somehow.

I'm missing something I guess, I just can't figure out what it is. Been staring at this for too long I think :)

Anyone know what else I could check?

Thanks!

if( !is_admin()){

function your_whole_nutrition_scripts() {
    wp_enqueue_style( 'ywn_stylesheet', get_stylesheet_uri() );
	wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/modernizr.js');
	wp_enqueue_script( 'foundation_min', get_template_directory_uri() . '/js/foundation.min.js');
	wp_enqueue_script( 'flowtype', get_template_directory_uri() . '/js/flowtype.js');
}

add_action( 'wp_enqueue_scripts', 'your_whole_nutrition_scripts' );
}

  <script type="javascript">
    $(document).foundation();
  </script>

<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="logo"><a href="http://mywebsite.com/">Your Whole Nutrition</a></li>
<li class="toggle-topbar"><a href="#"><span>menu</span></a></li>
</ul>
<section class="top-bar-section">

<ul id="menu-main-menu" class="right"><li id="menu-item-69" class="has-dropdown menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-69"><a href="http://mywebsite.com/about/">About</a>
<ul class="sub-menu">
    <li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="http://mywebsite.com/press-and-media/">Press and Media</a></li>
</ul>
</li>
<li id="menu-item-75" class="has-dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-75"><a href="#">Services</a>
<ul class="sub-menu">
	<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"><a href="http://mywebsite.com/consultations/">Consultations</a></li>
	<li id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-107"><a href="http://mywebsite.com/nutritional-supplements/">Nutritional Supplements</a></li>
	<li id="menu-item-108" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-108"><a href="http://mywebsite.com/gluten-sensitivity/">Gluten Sensitivity</a></li>
	<li id="menu-item-109" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-109"><a href="http://mywebsite.com/bio-identical-hormones/">Bio-Identical Hormones</a></li>
	<li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78"><a href="http://mywebsite.com/lab-tests/">Lab Tests</a></li>
	<li id="menu-item-79" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-79"><a href="http://mywebsite.com/speaking-presentations/">Speaking &#038; Presentations</a></li>
	<li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a href="http://mywebsite.com/corporate-wellness/">Corporate Wellness</a></li>
</ul>
</li>
<li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70"><a href="http://mywebsite.com/new-clients/">New Clients</a></li>
<li id="menu-item-72" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-72"><a href="http://mywebsite.com/blog/">Blog</a></li>
<li id="menu-item-101" class="has-dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-101"><a href="#">Resources</a>
<ul class="sub-menu">
	<li id="menu-item-105" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-105"><a href="http://mywebsite.com/our-journey-with-food/">Our Journey With Food</a></li>
	<li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-102"><a href="http://mywebsite.com/e-books/">E-Books</a></li>
	<li id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-103"><a href="http://mywebsite.com/e-newsletter/">E-newsletter</a></li>
	<li id="menu-item-106" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-106"><a href="http://mywebsite.com/recommended-reading/">Recommended Reading</a></li>
	<li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-104"><a href="http://mywebsite.com/links/">Links</a></li>
</ul>
</li>
<li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73"><a href="http://mywebsite.com/contact/">Contact</a></li>
</ul>
</section>
</nav>
Harrison Heck over 5 years ago

You need to change all of your <ul class="sub-menu"> to <ul class="dropdown">. After that it "should" work. Granted I'm not 100% sure because you are doing an upgrade from F4 to F5, and I don't know if you missed anything or not, such as CSS.

It did work for me though on a fresh F5 setup.

Jade over 5 years ago

Oh I know, I had changed that to 'sub-menu' because WP automatically names it sub-menu (I'm still trying to find a code snippet to change that so I can use 'dropdown'). But just for troubleshooting, I did change it back to dropdown and it didn't fix the issue.

I've made some changes last week and didn't think to check it, so I don't know when it stopped working. Now I'm trying to backtrack and figure out what I did ;) (I hate when that happens!) I don't want to lose all my other changes, but might have to, just to get that dropdown back. Hours of fun... ugh.

Jade over 5 years ago

OK so I figured out how to force the UL class to use 'dropdown' so the code matches, but the mobile menu still doesn't work. When I resize the browser window, I noticed that the code doesn't change like it does when I check the demo (the HTML outside of WordPress). It doesn't changed to add "expanded" when you click the Menu link, so there's obviously something not working right.

Anyone have any suggestions?

Jade over 5 years ago

Also, the menu icon doesn't show up, could that have something to do with it?

Rafi Benkual over 5 years ago

Is this a sass version or css?

If SASS, make sure your topbar breakpoint is set correctly.
_Settings.scss about line 1311

// Transitions and breakpoint styles

// $topbar-transition-speed: 300ms;
// $topbar-breakpoint: 940 !default; // Change to 9999px for always mobile layout
// $topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})";

If css, about line 1436 in the Foundation.css file

meta.foundation-mq-topbar {
  font-family: "/only screen and (min-width:40.063em)/";
  width: 40.063em; }

Check those to make sure.

Also the script at the bottom of my document looks like this. Not sure if WP is different:

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

And I found this post about wordpress and js loading. Maybe this helps:
http://foundation.zurb.com/forum/posts/304-foundation-5-topbar-mobile-navigation

Jade over 5 years ago

Thanks Rafi, for some reason I'm not getting any notifications from Foundation forums, so never saw this until today. I read the post you mentioned and was able to fix the menu, thanks so much for your help.

Now, off to post more about other menu issues LOL!

Benjamin Pieres almost 4 years ago

Hello you have to add this:

<li class="toggle-topbar menu-icon">
<a href="#">
      <span>Men&uacute;</span>
</a>
</li>

It's work for me!

Best

Regards