Menu icon Foundation
dropdown nav js confused

Hi,

I am using foundation 5.0.2. I had the top bar working nicely with the Default CSS download from the Foundation site.
I decided it would be good to use the sass version so I downloaded the github master zip.

There wasn't much by way of documentation on how to get all the imports etc working but after looking at the JointWP repo I was able to get it working. I just mention this to point out I'm a newbie and there may be config issues.

The dropdowns started to behave differently. In everything larger than a phone, where you should see normal dropdown nav (no mobile) instead of being able to click the top level links it make the nav the mobile nav height, while also displaying the desktop dropdown.
Attached are screenshots.

It seems similar to the problem and screens reported by prembo in this thread on Foundation 4.1.6.
https://github.com/zurb/foundation/issues/2418
except for him it only happened at a specific breakpoint.

I'd be glad to share any code.

Thanks,
alvar

Screen shot 2014 01 03 at 3.48.00 pm

Screen shot 2014 01 03 at 3.48.06 pm

<nav class="top-bar" data-topbar>



               <ul class="title-area">
                  <li class="name">

                  </li>
                  <li class="toggle-topbar menu-icon"><a href=""><span>Menu</span></a></li>
               </ul>
               <section class="top-bar-section">
                   <ul class="right show-for-large-up">
                     <li class="divider"></li>
                     <li class="soc soc-1"><a href="">F</a></li>
                     <li class="divider"></li>
                     <li class="soc soc-2"><a href="">S</a></li>
                     <li class="divider"></li>
                     <li class="soc soc-3"><a href="">E</a></li>
                  </ul>
                   <ul class='right'>

                     <?php
                       $defaults = array(
                           'theme_location'  => 'main-menu',
                           'menu'            => '',
                           'container'       => '',
                           'container_class' => '',
                           'container_id'    => '',
                           'menu_class'      => 'button-group right',
                           'menu_id'         => '',
                           'echo'            => true,
                           'fallback_cb'     => 'wp_nav_menu',
                           'before'          => '',
                           'after'           => '',
                           'link_before'     => '',
                           'link_after'      => '',
                           //'items_wrap'      => '<ul class="%2$s" role="navigation">%3$s</ul>',
                           'items_wrap'      => '%3$s',
                           'depth'           => 0,
                           'walker'          => new Top_Bar_Walker()
                       );

                       wp_nav_menu( $defaults );

                     ?>
                     </ul>

                  </section>

            </nav>
            

         

dropdownjs

Hi,

I am using foundation 5.0.2. I had the top bar working nicely with the Default CSS download from the Foundation site.
I decided it would be good to use the sass version so I downloaded the github master zip.

There wasn't much by way of documentation on how to get all the imports etc working but after looking at the JointWP repo I was able to get it working. I just mention this to point out I'm a newbie and there may be config issues.

The dropdowns started to behave differently. In everything larger than a phone, where you should see normal dropdown nav (no mobile) instead of being able to click the top level links it make the nav the mobile nav height, while also displaying the desktop dropdown.
Attached are screenshots.

It seems similar to the problem and screens reported by prembo in this thread on Foundation 4.1.6.
https://github.com/zurb/foundation/issues/2418
except for him it only happened at a specific breakpoint.

I'd be glad to share any code.

Thanks,
alvar

Screen shot 2014 01 03 at 3.48.00 pm

Screen shot 2014 01 03 at 3.48.06 pm

<nav class="top-bar" data-topbar>



               <ul class="title-area">
                  <li class="name">

                  </li>
                  <li class="toggle-topbar menu-icon"><a href=""><span>Menu</span></a></li>
               </ul>
               <section class="top-bar-section">
                   <ul class="right show-for-large-up">
                     <li class="divider"></li>
                     <li class="soc soc-1"><a href="">F</a></li>
                     <li class="divider"></li>
                     <li class="soc soc-2"><a href="">S</a></li>
                     <li class="divider"></li>
                     <li class="soc soc-3"><a href="">E</a></li>
                  </ul>
                   <ul class='right'>

                     <?php
                       $defaults = array(
                           'theme_location'  => 'main-menu',
                           'menu'            => '',
                           'container'       => '',
                           'container_class' => '',
                           'container_id'    => '',
                           'menu_class'      => 'button-group right',
                           'menu_id'         => '',
                           'echo'            => true,
                           'fallback_cb'     => 'wp_nav_menu',
                           'before'          => '',
                           'after'           => '',
                           'link_before'     => '',
                           'link_after'      => '',
                           //'items_wrap'      => '<ul class="%2$s" role="navigation">%3$s</ul>',
                           'items_wrap'      => '%3$s',
                           'depth'           => 0,
                           'walker'          => new Top_Bar_Walker()
                       );

                       wp_nav_menu( $defaults );

                     ?>
                     </ul>

                  </section>

            </nav>
            

         

This post has been closed. No new replies can be added.

Alvar Sirlin over 5 years ago

I found the issue.
When I switched to the sass version I kept using foundation.min.js
When I replaced that with foundation.js and foundation.topbar.js the problem resolved itself.