Foundation-sites: Global Flexbox enabled breaks Topbar 'top-bar-right' class

[bgarrant]

When I enable $global-flexbox: true; in my settings file, my Topbar is breaking alignment. The top-bar-right class requires a div with top-bar-left before it to align to right properly.

<div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle="responsive-menu"></button>
  <div class="title-bar-title">Site Name</div>
</div>

<div class="top-bar" id="responsive-menu">
  <div class="top-bar-left"></div> // THIS IS REQUIRED TO GET NEXT DIV TO ALIGN RIGHT

  <div class="top-bar-right">
    <ul class="vertical medium-horizontal menu" data-responsive-menu="accordion medium-dropdown">
        <li>
          <a href="#">Title</a>
        </li>
        <li>
          <a href="#">Title</a>
            <ul class="menu vertical">
                <li><a href="#">Sub Title</a></li>
            </ul>
        </li>
    </ul>
  </div>
</div>

Is this a bug?

[IamManchanda]

cc / @ncoden @brettsmason !
Test case => http://codepen.io/IamManchanda/pen/PpVZMd

[bgarrant]

Thanks @IamManchanda . Any fix you know of?

[IamManchanda]

@bgarrant i tagged other sass/css guys only coz was unable to solve myself (maybe due to lack of my current knowledge of flexbox)
Unless would have created a PR for a fix in no time :sweat_smile:

[bgarrant]

@IamManchanda Thanks. I tried a few ways as well with no success. Adding the empty div is only way other than disabling global flex which I do not want to do.

[brettsmason]

@bgarrant can you try adding margin-left: auto; to .top-bar-right?
If I understand correctly, that should make it display correctly.

[bgarrant]

That does work but why is that needed? I can;t find that in the docs anywhere?

[bgarrant]

This fixes it inline: <div class="top-bar-right" style="margin-left: auto;"> or you can fix it in the CSS as:

.top-bar-right {
  margin-left: auto;
}

[IamManchanda]

Yup this should be by default => http://codepen.io/IamManchanda/pen/VpReOb
@brettsmason @bgarrant

[IamManchanda]

@bgarrant .... Can you create a PR ? .... if not i will do it for you buddy!

[bgarrant]

@IamManchanda I am in a meeting like all day. Can you add that for me? I really appreciate it. Thanks for all your help @IamManchanda and @brettsmason !

[bgarrant]

had a typo above. Corrected it

[IamManchanda]

Done!! @bgarrant

[bgarrant]

Thank you @IamManchanda !