Menu icon Foundation
Responsive Toggle not working

I'm trying to update all my sites to Foundation 6 right now, but there is one issue: The responive toggle is not working as you can see it on: http://demo.chiropraktik-mohme.de/

My Code:

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

        <div class="top-bar" id="main-navigation">
          <div class="top-bar-left">
            <ul class="dropdown menu" data-dropdown-menu>
              <li class="menu-text">Site Title</li>
              <li class="has-submenu">
                <a href="#">One</a>
                <ul class="submenu menu vertical" data-submenu>
                  <li><a href="#">One</a></li>
                  <li><a href="#">Two</a></li>
                  <li><a href="#">Three</a></li>
                </ul>
              </li>
              <li><a href="#">Two</a></li>
              <li><a href="#">Three</a></li>
            </ul>
          </div>
          <div class="top-bar-right">
            <ul class="menu">
              <li><input type="search" placeholder="Search"></li>
              <li><button type="button" class="button">Search</button></li>
            </ul>
          </div>
        </div>
            

         

Responsivetogglemenunavigationtopbar

I'm trying to update all my sites to Foundation 6 right now, but there is one issue: The responive toggle is not working as you can see it on: http://demo.chiropraktik-mohme.de/

My Code:

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

        <div class="top-bar" id="main-navigation">
          <div class="top-bar-left">
            <ul class="dropdown menu" data-dropdown-menu>
              <li class="menu-text">Site Title</li>
              <li class="has-submenu">
                <a href="#">One</a>
                <ul class="submenu menu vertical" data-submenu>
                  <li><a href="#">One</a></li>
                  <li><a href="#">Two</a></li>
                  <li><a href="#">Three</a></li>
                </ul>
              </li>
              <li><a href="#">Two</a></li>
              <li><a href="#">Three</a></li>
            </ul>
          </div>
          <div class="top-bar-right">
            <ul class="menu">
              <li><input type="search" placeholder="Search"></li>
              <li><button type="button" class="button">Search</button></li>
            </ul>
          </div>
        </div>
            

         
Brian Tan almost 4 years ago

You are still on 6.0.0-alpha.1 It only works on 6.0.4 and above. (Current 6.0.5)

Jonas Marlo Loerken almost 4 years ago

Thank you, Brian! Im using the Yeti Launcher for creating and compiling my project. Is there aan option to update it?

Brian Tan almost 4 years ago

Not familiar with Yeti. I use bower update. There are probably posts in this forum regarding Yeti updates such as this one http://foundation.zurb.com/forum/posts/36520-update-foundation-in-yeti-launch

Brian Tan almost 4 years ago

Figured it out:

Install Xcode developer tools from app store or https://developer.apple.com/xcode/download/

Install node.js from http://nodejs.org Default install will include npm as well.

open terminal,

$ sudo npm install -g bower

then in your project directory, run

$ bower update

Jonas Marlo Loerken almost 4 years ago

Thank you, Brian!

I used Foundation 5 Sass so far, so Xcode, node.js so bower is still installed. I only have to run
"$ bower update". I will try it out later the day! :-)