Menu icon Foundation
Foundation 6.2 topbar dropdown issue

I´ve just upgraded from 6.1.2 to 6.2 and made everything that was in the upgrade tutorial.
Top-bar dropdown doesn´t work, i mean the dropdown pane it´s always visible :

Topbar dropdown issue

<div class="top-bar bg-institucional-1 hide-for-small-only" id="example-menu">
        <div class="top-bar-left">
          <ul class="dropdown menu" data-dropdown-menu>
            <li class="menu-text"><span class="txt-white">Instituto Nacional de Tecnología Industrial</span></li>
          </ul>
        </div>
        <div class="top-bar-right">
          <ul class="dropdown menu" data-dropdown-menu>
            <li>
              <a href="#"><span class="txt-white">One</span></a>
              <ul class="menu vertical">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
              </ul>
            </li>
            <li><a href="#"><span class="txt-white">Two</span></a></li>
            <li><a href="#"><span class="txt-white">Three</span></a></li>
          </ul>
        </div>
      </div>
            

         

topbardropdownfoundation 66.2

I´ve just upgraded from 6.1.2 to 6.2 and made everything that was in the upgrade tutorial.
Top-bar dropdown doesn´t work, i mean the dropdown pane it´s always visible :

Topbar dropdown issue

<div class="top-bar bg-institucional-1 hide-for-small-only" id="example-menu">
        <div class="top-bar-left">
          <ul class="dropdown menu" data-dropdown-menu>
            <li class="menu-text"><span class="txt-white">Instituto Nacional de Tecnología Industrial</span></li>
          </ul>
        </div>
        <div class="top-bar-right">
          <ul class="dropdown menu" data-dropdown-menu>
            <li>
              <a href="#"><span class="txt-white">One</span></a>
              <ul class="menu vertical">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
              </ul>
            </li>
            <li><a href="#"><span class="txt-white">Two</span></a></li>
            <li><a href="#"><span class="txt-white">Three</span></a></li>
          </ul>
        </div>
      </div>
            

         
Johan Jøsok over 3 years ago

Phill, does that really answer to the issue?

I have created my own responsive menu, and after updating to 6.2 I have the exact same issue. The dropdown is always visible. I have no javascript issues in console, and other javascript is working just fine.

 

data-dropdown-menu always open

Designer about 3 years ago

*BUMP*

 

I'm having exactly the same problem: the dropdown pane is ALWAYS visible, no matter which top-bar html code I test.

Andrew K almost 3 years ago

 I've hacked some CSS together to prevent this issue, but this doesn't seem right to me as if this is the default for the menu then it's a pretty terrible way to start off.  If the answer is in the docs, I doesn't seem very clear there either.

I'd like to know how to make the submenus be hidden (how it should work by default) as well without having to resort to hacking css right out of the box.

Paul Dodd over 2 years ago

Still the same problem with foundation-rails 6.4.1.2

The problem does not occur when loading css and js from cloudflare (see codepen). When using the default _settings.scss and foundation_and_overrides.scss the the result is:

Topbar responsive menu

One obvious difference in the computed CSS ist that the submenu display property is "flex" instead of "none".

Changing "$global-flexbox: true;" to "$global-flexbox: false;" makes the submenus not display, but the efect ist still not useable.

Harsh Pathak over 2 years ago

http://foundation.zurb.com/forum/posts/38667#comment_39097

 

I'm having the exact same issue Paul.  Were you able to find a fix for it?

Setting global-flexbox to false makes the submenus not visible, but the top-bar still expands along with the submenu when you hover on a dropdown menu.

Andrew K over 2 years ago

I don't recall what I did exactly to fix my issue, but I did eventually find out that the foundation-rails gem is not put together correctly (at least the version I was using at the time).  @imports were missing or out of order from those in the main foundation repo.  Once I synced things up to be the same as the main repo, pretty much all of my annoying bugs went away that were giving me a bad initial impression of the framework.

Paul Dodd over 2 years ago

Created an issue on foundation-rails referencing this post