Menu icon Foundation
Top bar dropdowns stopped working after upgrading to 5.1.1

Hi,

I upgraded one of my foundation project from 5.0.3 to 5.1.1 and now my Top Bar menu doesn't work fine anymore:
The Top Bar is not hoverable or clickable anymore, so the dropdowns can't be shown.

Any ideas?

<div class="contain-to-grid sticky">
    <nav class="top-bar" data-topbar="" data-options="mobile_show_parent_link: true">
        <ul class="title-area">
            <li class="name">
                <h1><a href="http://www.mydomainname.com/"><img
                        src="http://www.mydomainname.com/wp-content/themes/mythemename/images/logo.png" class="masthead-logo"
                        alt="Colibri"></a></h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
        </ul>

        <section class="top-bar-section">
            <div class="menu-container">
                <ul id="menu-top-bar" class="menu left">
                    <li class="divider"></li>
                    <li id="menu-item-68"
                        class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has-dropdown menu-item-68">
                        <a href="http://www.mydomainname.com/fonctionnalites/">Fonctionnalités</a>
                        <ul class="sub-menu dropdown">
                            <li id="menu-item-265"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-265"><a
                                    href="http://www.mydomainname.com/fonctionnalites/revue-de-lhistorique/">Revue de
                                l’historique</a></li>
                            <li id="menu-item-266"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-266"><a
                                    href="http://www.mydomainname.com/fonctionnalites/nouveaux-articles-substitutions/">Nouveaux
                                articles et substitutions</a></li>
                            <li id="menu-item-267"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-267"><a
                                    href="http://www.mydomainname.com/fonctionnalites/calculs-de-previsions/">Calculs de
                                prévisions</a></li>
                            <li id="menu-item-268"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-268"><a
                                    href="http://www.mydomainname.com/fonctionnalites/enrichissement-collaboratif/">Enrichissement
                                collaboratif</a></li>
                            <li id="menu-item-269"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-269"><a
                                    href="http://www.mydomainname.com/fonctionnalites/indicateurs-de-performance/">Indicateurs
                                de performance</a></li>
                            <li id="menu-item-246"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-246"><a
                                    href="http://www.mydomainname.com/fonctionnalites/demo-en-ligne/">Démo en ligne</a></li>
                        </ul>
                    </li>
                    <li class="divider"></li>
                    <li id="menu-item-240"
                        class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has-dropdown menu-item-240">
                        <a href="http://www.mydomainname.com/valeurs/">Valeurs</a>
                        <ul class="sub-menu dropdown">
                            <li id="menu-item-270"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-270"><a
                                    href="http://www.mydomainname.com/valeurs/accessible-les-budgets/">Accessible à tous les
                                budgets</a></li>
                            <li id="menu-item-271"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-271"><a
                                    href="http://www.mydomainname.com/valeurs/meilleures-pratiques-du-marche/">Bonnes pratiques
                                du métier</a></li>
                            <li id="menu-item-272"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-272"><a
                                    href="http://www.mydomainname.com/valeurs/collaboratif/">Collaboratif</a></li>
                            <li id="menu-item-274"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-274"><a
                                    href="http://www.mydomainname.com/valeurs/intuitif-ergonomique/">Intuitif et ergonomique</a>
                            </li>
                            <li id="menu-item-275"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-275"><a
                                    href="http://www.mydomainname.com/valeurs/mobilite/">Mobilité</a></li>
                            <li id="menu-item-276"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-276"><a
                                    href="http://www.mydomainname.com/valeurs/jump-and-run/">Jump &amp; Run</a></li>
                        </ul>
                    </li>
                    <li class="divider"></li>
                    <li id="menu-item-17"
                        class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has-dropdown menu-item-17">
                        <a href="http://www.mydomainname.com/offres/">Offres</a>
                        <ul class="sub-menu dropdown">
                            <li id="menu-item-92"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has-dropdown menu-item-92">
                                <a href="http://www.mydomainname.com/offres/acces-freemium/">Accès Freemium</a>
                                <ul class="sub-menu dropdown">
                                    <li id="menu-item-278"
                                        class="menu-item menu-item-type-post_type menu-item-object-page menu-item-278">
                                        <a href="http://www.mydomainname.com/offres/acces-freemium/souscription/">Souscription</a>
                                    </li>
                                </ul>
                            </li>
                            <li id="menu-item-91"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has-dropdown menu-item-91">
                                <a href="http://www.mydomainname.com/offres/colibri-enterprise/">Accès Premium</a>
                                <ul class="sub-menu dropdown">
                                    <li id="menu-item-327"
                                        class="menu-item menu-item-type-custom menu-item-object-custom menu-item-327"><a
                                            href="/contact/">Adhésion</a></li>
                                </ul>
                            </li>
                            <li id="menu-item-262"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-262"><a
                                    href="http://www.mydomainname.com/offres/services-options/">Services &amp; Options</a></li>
                        </ul>
                    </li>
                    <li class="divider"></li>
                    <li id="menu-item-15"
                        class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has-dropdown menu-item-15">
                        <a href="http://www.mydomainname.com/a-propos/">Solution</a>
                        <ul class="sub-menu dropdown">
                            <li id="menu-item-245"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-245"><a
                                    href="http://www.mydomainname.com/a-propos/architecture-technique/">Architecture
                                technique</a></li>
                            <li id="menu-item-238"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-238"><a
                                    href="http://www.mydomainname.com/a-propos/securite/">Sécurité</a></li>
                            <li id="menu-item-25"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a
                                    href="http://www.mydomainname.com/a-propos/nos-references/">Nos Références</a></li>
                            <li id="menu-item-357"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has-dropdown menu-item-357">
                                <a href="http://www.mydomainname.com/a-propos/partenaires/colibri-aps-construit-en-partenariat-avec-microsoft/">Partenaires</a>
                                <ul class="sub-menu dropdown">
                                    <li id="menu-item-263"
                                        class="menu-item menu-item-type-post_type menu-item-object-page menu-item-263">
                                        <a href="http://www.mydomainname.com/a-propos/partenaires/colibri-aps-construit-en-partenariat-avec-microsoft/">Partenariat
                                            Microsoft</a></li>
                                    <li id="menu-item-264"
                                        class="menu-item menu-item-type-post_type menu-item-object-page menu-item-264">
                                        <a href="http://www.mydomainname.com/a-propos/partenaires/devenir-partenaire/">Devenir
                                            partenaire</a></li>
                                </ul>
                            </li>
                            <li id="menu-item-114"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a
                                    href="http://www.mydomainname.com/a-propos/implantations/">Implantations</a></li>
                        </ul>
                    </li>
                    <li class="divider"></li>
                    <li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18">
                        <a href="http://www.mydomainname.com/news/">News</a></li>
                    <li class="divider"></li>
                    <li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19">
                        <a href="http://www.mydomainname.com/contact/">Contact</a></li>
                    <li class="divider"></li>
                    <li id="menu-item-93"
                        class="has-special menu-item menu-item-type-post_type menu-item-object-page menu-item-93"><a
                            href="http://www.mydomainname.com/offres/acces-freemium/">Testez gratuitement !</a></li>
                </ul>
                <div class="left">
                    <ul class="language-switcher">
                        <li><a href="http://www.mydomainname.com/en/" title="Anglais"><img
                                src="http://www.mydomainname.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/en.png"
                                alt="Anglais"></a></li>
                    </ul>
                </div>
            </div>
        </section>

    </nav>

</div>

topbarupgrade

Hi,

I upgraded one of my foundation project from 5.0.3 to 5.1.1 and now my Top Bar menu doesn't work fine anymore:
The Top Bar is not hoverable or clickable anymore, so the dropdowns can't be shown.

Any ideas?

<div class="contain-to-grid sticky">
    <nav class="top-bar" data-topbar="" data-options="mobile_show_parent_link: true">
        <ul class="title-area">
            <li class="name">
                <h1><a href="http://www.mydomainname.com/"><img
                        src="http://www.mydomainname.com/wp-content/themes/mythemename/images/logo.png" class="masthead-logo"
                        alt="Colibri"></a></h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
        </ul>

        <section class="top-bar-section">
            <div class="menu-container">
                <ul id="menu-top-bar" class="menu left">
                    <li class="divider"></li>
                    <li id="menu-item-68"
                        class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has-dropdown menu-item-68">
                        <a href="http://www.mydomainname.com/fonctionnalites/">Fonctionnalités</a>
                        <ul class="sub-menu dropdown">
                            <li id="menu-item-265"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-265"><a
                                    href="http://www.mydomainname.com/fonctionnalites/revue-de-lhistorique/">Revue de
                                l’historique</a></li>
                            <li id="menu-item-266"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-266"><a
                                    href="http://www.mydomainname.com/fonctionnalites/nouveaux-articles-substitutions/">Nouveaux
                                articles et substitutions</a></li>
                            <li id="menu-item-267"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-267"><a
                                    href="http://www.mydomainname.com/fonctionnalites/calculs-de-previsions/">Calculs de
                                prévisions</a></li>
                            <li id="menu-item-268"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-268"><a
                                    href="http://www.mydomainname.com/fonctionnalites/enrichissement-collaboratif/">Enrichissement
                                collaboratif</a></li>
                            <li id="menu-item-269"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-269"><a
                                    href="http://www.mydomainname.com/fonctionnalites/indicateurs-de-performance/">Indicateurs
                                de performance</a></li>
                            <li id="menu-item-246"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-246"><a
                                    href="http://www.mydomainname.com/fonctionnalites/demo-en-ligne/">Démo en ligne</a></li>
                        </ul>
                    </li>
                    <li class="divider"></li>
                    <li id="menu-item-240"
                        class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has-dropdown menu-item-240">
                        <a href="http://www.mydomainname.com/valeurs/">Valeurs</a>
                        <ul class="sub-menu dropdown">
                            <li id="menu-item-270"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-270"><a
                                    href="http://www.mydomainname.com/valeurs/accessible-les-budgets/">Accessible à tous les
                                budgets</a></li>
                            <li id="menu-item-271"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-271"><a
                                    href="http://www.mydomainname.com/valeurs/meilleures-pratiques-du-marche/">Bonnes pratiques
                                du métier</a></li>
                            <li id="menu-item-272"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-272"><a
                                    href="http://www.mydomainname.com/valeurs/collaboratif/">Collaboratif</a></li>
                            <li id="menu-item-274"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-274"><a
                                    href="http://www.mydomainname.com/valeurs/intuitif-ergonomique/">Intuitif et ergonomique</a>
                            </li>
                            <li id="menu-item-275"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-275"><a
                                    href="http://www.mydomainname.com/valeurs/mobilite/">Mobilité</a></li>
                            <li id="menu-item-276"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-276"><a
                                    href="http://www.mydomainname.com/valeurs/jump-and-run/">Jump &amp; Run</a></li>
                        </ul>
                    </li>
                    <li class="divider"></li>
                    <li id="menu-item-17"
                        class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has-dropdown menu-item-17">
                        <a href="http://www.mydomainname.com/offres/">Offres</a>
                        <ul class="sub-menu dropdown">
                            <li id="menu-item-92"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has-dropdown menu-item-92">
                                <a href="http://www.mydomainname.com/offres/acces-freemium/">Accès Freemium</a>
                                <ul class="sub-menu dropdown">
                                    <li id="menu-item-278"
                                        class="menu-item menu-item-type-post_type menu-item-object-page menu-item-278">
                                        <a href="http://www.mydomainname.com/offres/acces-freemium/souscription/">Souscription</a>
                                    </li>
                                </ul>
                            </li>
                            <li id="menu-item-91"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has-dropdown menu-item-91">
                                <a href="http://www.mydomainname.com/offres/colibri-enterprise/">Accès Premium</a>
                                <ul class="sub-menu dropdown">
                                    <li id="menu-item-327"
                                        class="menu-item menu-item-type-custom menu-item-object-custom menu-item-327"><a
                                            href="/contact/">Adhésion</a></li>
                                </ul>
                            </li>
                            <li id="menu-item-262"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-262"><a
                                    href="http://www.mydomainname.com/offres/services-options/">Services &amp; Options</a></li>
                        </ul>
                    </li>
                    <li class="divider"></li>
                    <li id="menu-item-15"
                        class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has-dropdown menu-item-15">
                        <a href="http://www.mydomainname.com/a-propos/">Solution</a>
                        <ul class="sub-menu dropdown">
                            <li id="menu-item-245"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-245"><a
                                    href="http://www.mydomainname.com/a-propos/architecture-technique/">Architecture
                                technique</a></li>
                            <li id="menu-item-238"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-238"><a
                                    href="http://www.mydomainname.com/a-propos/securite/">Sécurité</a></li>
                            <li id="menu-item-25"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a
                                    href="http://www.mydomainname.com/a-propos/nos-references/">Nos Références</a></li>
                            <li id="menu-item-357"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has-dropdown menu-item-357">
                                <a href="http://www.mydomainname.com/a-propos/partenaires/colibri-aps-construit-en-partenariat-avec-microsoft/">Partenaires</a>
                                <ul class="sub-menu dropdown">
                                    <li id="menu-item-263"
                                        class="menu-item menu-item-type-post_type menu-item-object-page menu-item-263">
                                        <a href="http://www.mydomainname.com/a-propos/partenaires/colibri-aps-construit-en-partenariat-avec-microsoft/">Partenariat
                                            Microsoft</a></li>
                                    <li id="menu-item-264"
                                        class="menu-item menu-item-type-post_type menu-item-object-page menu-item-264">
                                        <a href="http://www.mydomainname.com/a-propos/partenaires/devenir-partenaire/">Devenir
                                            partenaire</a></li>
                                </ul>
                            </li>
                            <li id="menu-item-114"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a
                                    href="http://www.mydomainname.com/a-propos/implantations/">Implantations</a></li>
                        </ul>
                    </li>
                    <li class="divider"></li>
                    <li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18">
                        <a href="http://www.mydomainname.com/news/">News</a></li>
                    <li class="divider"></li>
                    <li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19">
                        <a href="http://www.mydomainname.com/contact/">Contact</a></li>
                    <li class="divider"></li>
                    <li id="menu-item-93"
                        class="has-special menu-item menu-item-type-post_type menu-item-object-page menu-item-93"><a
                            href="http://www.mydomainname.com/offres/acces-freemium/">Testez gratuitement !</a></li>
                </ul>
                <div class="left">
                    <ul class="language-switcher">
                        <li><a href="http://www.mydomainname.com/en/" title="Anglais"><img
                                src="http://www.mydomainname.com/wp-content/plugins/sitepress-multilingual-cms/res/flags/en.png"
                                alt="Anglais"></a></li>
                    </ul>
                </div>
            </div>
        </section>

    </nav>

</div>
Rafi Benkual over 5 years ago

You should check you JS file-paths. Recently jquery changed their file paths

It should be something like:

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>