Navigation adaptative en HTML/CSS utilisant le framework Foundation

Question

J'essaye de reproduire la barre de navigation de codepen suivante bien que j'ai un logo simple sur la gauche et deux liens sur la droite. Le cadre utilisé est la Fondation Zurb: https://codepen.io/IamManchanda/pen/LymroM?editors=1000

Jusqu'à présent, je n'arrive pas à obtenir le menu réactif. Lorsque j'utilise une grande fenêtre, le menu mobile reste en place et ne bascule pas comme dans le stylo. Des idées pour reproduire cela?

Modèle:

<div class="title-bar" data-responsive-toggle="navbar" data-hide-for="medium"> 
    <button class="menu-icon" type="button" data-toggle="navbar"></button> 
    <div class="title-bar-title">Menu</div> 
</div> 

<div class="top-bar" id="navbar"> 
    <div class="top-bar-left"> 
    <ul class="menu"> 
     <li class="menu-text"> 
     <a href="http://www.hanyu.co/default.aspx"><img id="logo" src="./assets/img/logo4white.png" alt="logo">HANYU.CO</a> 
     </li> 
    </ul> 
    </div> 
    <div class="top-bar-right"> 
    <ul class="menu"> 
     <li id="home"><router-link class="link align-left" to="/">Home</router-link></li> 
     <li id="logout" v-if="this.$cookies.get('user')" @click="logout"><a>Logout</a></li> 
    </ul> 
    </div> 
</div> 

Merci à l'avance!

Answer 1

J'ai réalisé que je n'appelais pas $(document).foundation(); dans le JavaScript. Oops!