Menu icon Foundation
Upgrade to 5.0.3 - drop downs stopped working

I upgrade to 5.0.3 to fix my missing mobile pancake - now my drop downs stopped working.
My row widths changed too - I looked at the CSS and found 1 difference between 5.0.2 -> 5.0.3 where Row max width is now set to 62.5rem.

Then I started looking at other files and found a few files were not included in the new set -
Zepto & custom modernizer
alerts
cookie
forms
placeholder
section
tooltips

Any other changes that I need to know about?

Picture1

upgrade5.0.3dropdowns

I upgrade to 5.0.3 to fix my missing mobile pancake - now my drop downs stopped working.
My row widths changed too - I looked at the CSS and found 1 difference between 5.0.2 -> 5.0.3 where Row max width is now set to 62.5rem.

Then I started looking at other files and found a few files were not included in the new set -
Zepto & custom modernizer
alerts
cookie
forms
placeholder
section
tooltips

Any other changes that I need to know about?

Picture1
Rafi Benkual over 3 years ago

I'm assuming that you were using 5.0.2 before? Can you confirm?

The changelog has all the updates http://foundation.zurb.com/docs/changelog.html. They were over 300 commits.

We have not have any other reports like the one you describe.
Can you post the code for the dropdowns so we can see what is happening?

Robert Brown over 3 years ago

Yep, was on 5.0.2 and moved up to 5.0.3 to fix the missing pancake.

 ```<div id="nav">
<div class="fixed">
<nav class="top-bar" data-topbar>
    <ul class="title-area">
    <li class="name">

    </li>
    <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
  </ul>

  <section class="top-bar-section">
  <!-- Right Nav Section -->
      <ul class="right">
        <li class="divider"></li>
        <li class="has-dropdown">
          <a href="#">Classes</a>
          <ul class="dropdown">
            <li><label>Find classes:</label></li>
        <li class="has-dropdown">
      <a href="#" class="">By Dance Style</a>
      <ul class="dropdown">
        <li><a href="Ballet.php">Ballet</a></li>
        <li><a href="Boys.php">Boys</a></li>  
        <li><a href="Contemporay.php">Contemporary</a></li>
        <li><a href="EarlyChildhood.php">Early Childhood</a></li>
        <li><a href="Gymnastics.php">Gymnastics</a></li>    
        <li><a href="HipHop.php">Hip Hop</a></li>      
        <li><a href="Jazz.php">Jazz</a></li>    
        <li><a href="Lyrical.php">Lyrical</a></li>
        <li><a href="MusicalTheater.php">Musical Theater</a></li>      
        <li><a href="Tap.php">Tap</a></li>
        <li><a href="Zumba.php">Zumba</a></li>
      </ul>
            <li class="divider"></li>
            <li class="has-dropdown">
      <a href="#" class="">By Age</a>
      <ul class="dropdown">
        <li><a href="2.php">2 Year Olds</a></li>
        <li><a href="3.php">3 Year Olds</a></li>
        <li><a href="4.php">4 Year Olds</a></li>
        <li><a href="5.php">5 Year Olds</a></li>
        <li><a href="6to7.php">6-7 Year Olds</a></li>
        <li><a href="8to10.php">8-10 Year Olds</a></li>
        <li><a href="11plus.php">11+ Year Olds</a></li>
        <li><a href="Adult.php">Adults</a></li>
      </ul>
            <li class="divider"></li>
      <li class="has-dropdown">
        <a href="#" class="">By Season</a>
          <ul class="dropdown">
            <li><a href="Fall.php">Fall</a></li>
            <li><a href="Winter.php">Winter</a></li>
            <li><a href="Spring.php">Spring</a></li>
            <li><a href="Summer.php">Summer</a></li>
          </ul>  
      <li class="divider"></li>
      <li><a href="Schedule.php">Full Schedule</a></li>
      </ul>
      </li>
        <li class="divider"></li>
        <li><a href="#">Schedule</a></li>
        <li class="divider"></li>
        <li><a href="#">About JCDA</a></li>
    <li class="divider"></li>
    <li><a href="#">Contact Us</a></li>
    <li class="divider"></li>
        <li class="has-dropdown">
          <a href="#">(201) 435-8943</a>
          <ul class="dropdown">
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li class="divider"></li>
            <li><a href="#">See all ?</a></li>
          </ul>
        </li>
      </ul>
    </section>
  </nav>
</div>
</div> <!-- end #nav -->

Rafi Benkual over 3 years ago

It is not the topbar code. Here is a demo with your code and it works. http://cdpn.io/vFimK.

Scripts you should have loaded at bottom of page in SASS version:

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

Robert Brown over 3 years ago

The file "app.js" isn't in the 5.0.3 zip download - see added image above. What is that?

Rafi Benkual over 3 years ago

Long ago we split out all the code in app.js into separate plugins.

The main purpose of app.js now is to initialize Foundation. $(document).foundation();

And is provided as a convenience for users to place any other JS they may need for their project. So you can load all your JS plugins in app.js there, and call the app.js script on your index page.

These are the contents. You can choose to use it or not.

// Foundation JavaScript
// Documentation can be found at: http://foundation.zurb.com/docs
$(document).foundation();

If you use it, the scripts at the bottom look like

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

If you don't use it,
then it looks like:

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