Menu icon Foundation
Top Bar Expanded spacing in F6-Sites

The "expanded" TopBar allocates equal WIDTH not equal PADDING to spread out menu items -- see image.

How can we change it to equal padding so the menu items are spread equally apart?

Thanks - Bill

Screenshot 2016 01 17 07.36.45

The "expanded" TopBar allocates equal WIDTH not equal PADDING to spread out menu items -- see image.

How can we change it to equal padding so the menu items are spread equally apart?

Thanks - Bill

Screenshot 2016 01 17 07.36.45
Rafi Benkual almost 4 years ago

Hi Bill,
That's odd. The padding is even on my example here: http://codepen.io/rafibomb/pen/QyOpJY?editors=100

If you share your code for it we can help figure it out!

Bill Sholar almost 4 years ago

Thanks Rafi, but try making one of the menu items much longer and check... The width is unchanged

https://www.dropbox.com/s/n8rxa9yo8q4o6t7/Screenshot%202016-01-18%2018.31.03.png?dl=0

Rafi Benkual almost 4 years ago

I still don't see it: http://codepen.io/rafibomb/pen/QyOpJY?editors=100

The padding is on the inside of the box and is NOT used to center the text. So the text will expand until it reaches the padding then wrap.

But I am using 6.1.1, what version are you on? Maybe it was updated.

Bill Sholar almost 4 years ago

I was looking just at your Codepen, which behaves the same as my sites, so it isn't a version issue.

Your revised example leaves a lot less space/padding between the text "two" and the text of the next item than between "one" and "two" - it is keeping the box width equal, as though a table with equally sized TD's, rather that equal spacing of the text.

I am hoping for equal spacing of the text rather than equal width of the boxes.

Rafi Benkual almost 4 years ago

Oh I see. Expanded is meant to make each list item even width and fill the container 100%. It uses the display: table; method.

Flexbox solves this easily but this is much harder to do without it.

Bill Sholar almost 4 years ago

Found a fix for this -- add this to your custom CSS:

.menu.expanded { table-layout: auto; }