Dropdown submenu not working in flex mode.

[ycrepeau]

The top bar menu (responsive) has a drop down submenu to allow user to pick the language in her/his choice. When Foundation 6 is in Flexmode, the dropdown does not work (the submenu remains open).

In foundation_and_overide.scss, I had the following:

$global-flexbox: true;
//@include foundation-grid;
@include foundation-flex-grid;
@include foundation-flex-classes;

The workaround was:

//$global-flexbox: true;
@include foundation-grid;
//@include foundation-flex-grid;
//@include foundation-flex-classes;

The haml code is:

-# /app/views/layout/_header.html.haml
/ Start Top Bar
.title-bar{"data-hide-for" => "medium", "data-responsive-toggle" => "example-menu"}
  %span{"data-toggle" => "example-menu.top-bar", :type => "button"}
    %button.menu-icon
  .title-bar-title Yeti

#example-menu.top-bar
  .top-bar-left
    %ul.dropdown.vertical.medium-horizontal.menu
      %li.menu-text Yeti
      %li= link_to "Home", root_path

  .top-bar-right
    %ul.dropdown.menu.vertical.medium-horizontal(data-dropdown-menu)
      - if user_signed_in?
        %li= link_to "Edit profile",  edit_user_registration_path
        %li= link_to "Logout",  destroy_user_session_path, :method => :delete
      - else
        %li=link_to "Log in!", new_user_session_path

      %li.has-submenu= render 'layouts/locale_selector', controller: controller_name, action: action_name

and

-# /app/views/layouts/_locale_selector.html.haml
%a{:href=>"#"}
  %span.fa.fa-lg.fa-globe
%ul.menu.submenu.vertical(data-submenu)
  - previous_enabled = true
  - locale_languages.each do |language|
    - if language[:disabled]
      - if previous_enabled
        - previous_enabled = false
        %li
          %hr

      %li
        %span{:style=>'font-size:75%; color:#888; margin-left:15px;'}
          =language[:label]
    - else
      %li
        = link_to language[:label],
                  controller: controller,
                  action: action,
                  set_locale: language[:locale],
                  page: params[:page]

[masonhale]

+1 I'm having the same issue.

[masonhale]

Seems related to #8278 and #8305. The fix is to change the load order of the css files, such that @include foundation-menu is occurs before @include foundation-dropdown-menu. I made that change and it now works for me.

[ShadowRadiance]

Global Flexbox adds display: flex to .menu which is at the same level of specificity as .is-dropdown-submenu. Since _menu.scss is loaded after _dropdown-menu.scss the later definition at the same specificity wins (overwriting the dropdown's display: none setting).

Either the @import order in foundation.scss needs to change (as suggested by @masonhale above) or the .is-dropdown-menu rule must be more specific than the .menu rule.

(.is-dropdown-menu used to have a more specific version along with it, .is-dropdown-submenu, .top-bar .is-dropdown-submenu, but that was removed in commit 2b91d95

[colin-marshall]

@ShadowRadiance wasn't the import order already changed?

See:
https://github.com/zurb/foundation-sites-template/blob/master/scss/app.scss#L23-L27
https://github.com/zurb/foundation-zurb-template/blob/master/src/assets/scss/app.scss#L24-L28

[ncoden]

@colin-marshall This is also related to #10856

[colin-marshall]

@ncoden I'll review that soon. This one looks good to close, right?

[ncoden]

It is.