Foundation-sites: TopBar .contain-to-grid not available in Foundation 6 anymore?

Created on 1 Dec 2015 · 9Comments · Source: foundation/foundation-sites

Is there a special reason why the .contain-to-grid class doesn't exist in foundation 6 anymore? Or is there a new way to fit the top-bar into the grid?

Source

R4c00n

Most helpful comment

I did it a little bid differently, so I could keep the full width nav color.

<nav class="top-bar">
  <div class="row">
    ...
  </div>
</div>

zacksmash on 6 Dec 2015

👍4

All 9 comments

In the Foundation 6 docs, you can can give a full-width column a container class column row which will give the same behaviour as contain-to-grid.

<nav class="column row">
  <div class="top-bar">
    ...
  </div>
</nav>

ScottyZA on 1 Dec 2015

@ScottyZA That's the solution, thanks :)

gakimball on 1 Dec 2015

Thanks @ScottyZA :)

R4c00n on 3 Dec 2015

I did it a little bid differently, so I could keep the full width nav color.

<nav class="top-bar">
  <div class="row">
    ...
  </div>
</div>

zacksmash on 6 Dec 2015

👍4

thanks @zacksmash

simonh1000 on 18 Jan 2016

Actually, this is working with the normal grid, but using flex doesn't work anymore. You have to set width : 100% in the div containing top-bar.

Is this a bug or the normal behavior?

juchom on 30 Mar 2016

Will be great that the example have to nav instead div, and the Top bar should works with navbars.

SalahAdDin on 31 Mar 2016

Am also facing the same problem, It doesn't work with "Flex Grid", I wish they had "contain-to-grid" in F6 also. so many features from F5 is lost.. :(

Top-Bar-Left takes the full width, forcing Tob-Bar-Right to go Below.. which is bad when using Flex-Box Grid. Whereas, in Normal grid - its fine.

Hope they fix such issues in F6

@zacksmash & @juchom : Have you tried Responsive toggle in Flex-Box ??