Menu icon Foundation
Using Global Flexbox in 6.2.1 breaks my topbar

 

I rewrote this question using a codepen to make things easier.

I'm trying to use flexbox global flexbox layout to do a top bar as in this codepen.

As you can see the top bar menu is skewed to the left. There are two separate things I want to know how to do.

 

1. How do I make the menu as fixed width and then center it horizontally.

2. How do I make the menu expand to the left and right edges like it does in the non flexbox layout.

 

I've tried every combination of specifying a width, text-align: center, and/or justify-content: center, but nothing seems to have any effect. Can anyone help get this codepen working or figure out what I'm doing wrong?

 

http://codepen.io/ceres629/pen/xVaqVj

global flexbox

 

I rewrote this question using a codepen to make things easier.

I'm trying to use flexbox global flexbox layout to do a top bar as in this codepen.

As you can see the top bar menu is skewed to the left. There are two separate things I want to know how to do.

 

1. How do I make the menu as fixed width and then center it horizontally.

2. How do I make the menu expand to the left and right edges like it does in the non flexbox layout.

 

I've tried every combination of specifying a width, text-align: center, and/or justify-content: center, but nothing seems to have any effect. Can anyone help get this codepen working or figure out what I'm doing wrong?

 

http://codepen.io/ceres629/pen/xVaqVj

Rafi Benkual over 3 years ago

You can wrap the menu in a row and column to give is a max-width

<div class="row column">
 menu here
</div>

In flexbox, the justify content attribute controls positioning:

.top-bar-right ul {
  justify-content: flex-end;
}

This flexbox cheatsheet will help: http://www.sketchingwithcss.com/samplechapter/cheatsheet.html#right

Example http://codepen.io/rafibomb/pen/MyqpdG

Stewart over 3 years ago

Very much appreciated! This worked perfectly.