Menu icon Foundation
Dropdown Top Bar not working in WordPress

I made a 'first version' of a site with help of foundation 5. Now I'm trying to convert it to a WordPress (3.8) template. Most problems have been easily solved, but I can't get the Top Bar to work.

At first it wouldn't work at all. With the help of google and earlier answers I fixed the normal menu with https://gist.github.com/awshout/3943026
and the mobile menu with http://foundation.zurb.com/forum/posts/304-foundation-5-topbar-mobile-navigation

My only problem left is the dropdown menu. The dropdown still doesn't work. If I click on it, the button does turn dark, but no dropdown menu appears.

The code WordPress creates look like this:

<section class="top-bar-section">
                     
    <ul id="menu-main-menu" class="top-bar-menu right"><li id="menu-item-155" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item active menu-item-155"><a href="#">Home</a><li class="divider"></li></li>
        <li id="menu-item-172" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-172"><a href="#">Item 1</a><li class="divider"></li></li>
        <li id="menu-item-156" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-156"><a href="#">Item 2</a><li class="divider"></li></li>
        <li id="menu-item-170" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has-dropdown not-click menu-item-170"><a href="#">Item 3</a><li class="divider"></li>
            <ul class="dropdown">
                <li id="menu-item-174" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-174"><a href="#">Item 4</a><li class="divider"></li></li>
            </ul>
        </li>
        <li id="menu-item-168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-168"><a href="#">Item 5</a><li class="divider"></li></li>
        <li id="menu-item-161" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-161"><a href="#">Contact</a><li class="divider"></li></li>
    </ul>                

</section>

Has anyone had the same problem and solved it? Or am I forgetting something?

wordpressFoundation 5dropdowntop-bar

I made a 'first version' of a site with help of foundation 5. Now I'm trying to convert it to a WordPress (3.8) template. Most problems have been easily solved, but I can't get the Top Bar to work.

At first it wouldn't work at all. With the help of google and earlier answers I fixed the normal menu with https://gist.github.com/awshout/3943026
and the mobile menu with http://foundation.zurb.com/forum/posts/304-foundation-5-topbar-mobile-navigation

My only problem left is the dropdown menu. The dropdown still doesn't work. If I click on it, the button does turn dark, but no dropdown menu appears.

The code WordPress creates look like this:

<section class="top-bar-section">
                     
    <ul id="menu-main-menu" class="top-bar-menu right"><li id="menu-item-155" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item active menu-item-155"><a href="#">Home</a><li class="divider"></li></li>
        <li id="menu-item-172" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-172"><a href="#">Item 1</a><li class="divider"></li></li>
        <li id="menu-item-156" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-156"><a href="#">Item 2</a><li class="divider"></li></li>
        <li id="menu-item-170" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has-dropdown not-click menu-item-170"><a href="#">Item 3</a><li class="divider"></li>
            <ul class="dropdown">
                <li id="menu-item-174" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-174"><a href="#">Item 4</a><li class="divider"></li></li>
            </ul>
        </li>
        <li id="menu-item-168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-168"><a href="#">Item 5</a><li class="divider"></li></li>
        <li id="menu-item-161" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-161"><a href="#">Contact</a><li class="divider"></li></li>
    </ul>                

</section>

Has anyone had the same problem and solved it? Or am I forgetting something?

Stef Serafin over 5 years ago

Hi Maiken,

Not sure if you still need help but did you check to see if you're calling jQuery properly? If you are using Foundations standard call by doing this

  $(document).foundation();
</script>


You need to switch the $ sign to jQuery. WordPress doesn't like the $.

Hope this helps.

Bjoern Dammann over 5 years ago

Hi,

I have a similiar issue with the dropdown of F5 in WordPress, in the github Link you provided someone else is having this issue as well.

When I click something with a dropdown menu, the dropdown is there, but with the click the mobile menu is coming out in some way, I have a screenshot here http://imgur.com/hRpYxET

The Theme was working on F4 fine and I upgraded to F5 via the migration guide and there were no errors, changed the jquery stuff etc. All working fine except this. I already added the data-options for the navigation, which is new in F5 to F4.

Malou Geurts over 5 years ago

Hi Bjoern,

Have you fixed the issue from your screenshot yet? I have the same issue, basically disabling the parent link in the dropdown menu. I noticed that when you click on the parent item the class moved gets added to the markup instead of just following the link. I'm assuming this is the functionality that lets it slide to the next part in the mobile version (which needs the container to become hight to fit the content, which is why the top-bar expands on large views as well).

Anyway, I'm still looking for a fix. (Using wp 3.8.1 & foundation 5.1.1)

Thanks

Lindsey Jones about 5 years ago

I am also struggling with this. I implemented the off-canvas menu and slicknav.js but now the desktop version dropdowns are gone and will not appear. Any luck or solutions anyone has found?

Coud something be conflicting in the js?

Jade about 5 years ago

Hi Lindsey,

Did you ever find an answer to this one?

Raman Dhawan almost 5 years ago

Found Solution in below link. It worked for me!!!
http://www.therdnotes.com/2014/08/foundation-top-bar-dropdown-not-working.html

Terry Hale almost 5 years ago

I had to deregister the jQuery that Wordpress uses by default and then reregister jQuery 2.1.

I believe that Wordpress uses jQuery 1.10 or 1.11 by default.

This could have some unintended consequences with some plugins that may be using depreciated jQuery functions that are no longer supported in jQuery 2.x

Make sure that this happens before you enqueue the foundation.min.js script in your functions.php file

    // only use this method is we're not in wp-admin
    if ( ! is_admin() ) {

        // deregister the original version of jQuery
        wp_deregister_script('jquery');

        // Registering jQuery 2.1.x for Foundation 5 support
        wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js', true, '2.1.0');


        // adding it it back into the queue so that other plugins that are jQuery dependant have access
        wp_enqueue_script('jquery');

  }

katrinluk over 4 years ago

You may refer to the foundation github issues 3588, there is a fix provided which can solve the problem.
I have the similar issue same as you, and the fix solve my problem.
But it seems that this fix doesn't work on Chrome version 37, but after upgrade to Chrome 38, it is ok.

https://github.com/zurb/foundation/issues/3588

Michael kamau over 3 years ago

I had the same problem with my site where the drop down menu on my WordPress site was not working and also some of my pages were not displaying correctly. i tried all the solutions that i found online but nothing worked. so i tried something different and it worked for me.

The problem was the WordPress installation or the updates.

To fix the problem you will have to update the WordPress installation manually via FTP

If you don't know how to go about the manual WordPress update use the link bellow

https://www.youtube.com/watch?v=8EOFNs-6HaA

Even if you have the latest version of WordPress installed just do the update t works