Responsive top bar has issues with $global-flexbox: true

[gremmie]

How can we reproduce this bug?

Note: Using Foundation 6.2

1. Use flex grid in sass as described here
2. $global-flexbox: true;
3. Create a top bar like this:

<div class="top-bar" id="main-menu">
   <div class="top-bar-left">
      <ul class="menu vertical medium-horizontal expanded" data-responsive-menu="drilldown medium-dropdown">
        <li>
          <a href="#">Item 1</a>
          <ul class="menu">
            <li><a href="#">Item 1A</a></li>
            <li><a href="#">Item 1B</a></li>
            <li><a href="#">Item 1C</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Item 2</a>
          <ul class="menu">
            <li><a href="#">Item 2A</a></li>
            <li><a href="#">Item 2B</a></li>
            <li><a href="#">Item 2C</a></li>
          </ul>
        </li>
      </ul>
   </div>
</div>

What did you expect to happen?

• Menus are expanded across width of screen
• Menus go vertical when the screen size is shrunk

What happened instead?

• Menus are aligned to the left instead of expanded
• When the screen is made smaller, the menus do not go vertical, they stay horizontal, although it looks like the drilldown functionality is still mostly working.

Changing $global-flexbox: false; fixes these 2 issues.

Thanks.

[lokiloq]

I also have an issue involving the topbar and $global-flexbox: true.

When I change $global-flexbox from false to true, running sass task (grunt) print the following error in my terminal :

Running "watch" task
Completed in 1.569s at Fri Mar 04 2016 17:16:42 GMT+0100 (CET) - Waiting...
>> File "src/sass/_settings.scss" changed.

Running "sass:dist" (sass) task
Error: Properties are only allowed within rules, directives, mixin includes, or other properties.
        on line 80 of /Users/XXX/XXXX/XXXXX/node_modules/foundation-sites/scss/components/_top-bar.scss
  Use --trace for backtrace.
Warning: Exited with error code 65

Maybe that is related to @gremmie 's problem?

Regards.

[gremmie]

@lokiloq No, I don't have any problems compiling the sass.

I should mention that I had rearranged the order of @includes as per issue #8278.

[mortenson]

Confirmed and seeing the same issue after upgrading from 6.1 to 6.2.

[RobEasthope]

I managed to fix this by renaming the default .top-bar class in the markup and including the component in the renamed class: .header-bar { @include top-bar-container; }.

I don't know why it fixes the issue however, presumably there is a bug in the default foundation settings?

[kball]

Unfortunately this is getting pushed out to 6.3.1