Menu icon Foundation
Top-Bar-Section Width

I am trying to make a nav bar that is centered, but that is spread wider. For instance, with the code below the nav bar is 440px wide, but I would like to increase the width of each item in the list so that the entire bar takes up, say 1200px. How can I accomplish this change in width and stay centered?

Nav bar

Html

top-bartop bar sectionwidthgrid

I am trying to make a nav bar that is centered, but that is spread wider. For instance, with the code below the nav bar is 440px wide, but I would like to increase the width of each item in the list so that the entire bar takes up, say 1200px. How can I accomplish this change in width and stay centered?

Nav bar

Html
Wing-Hou Chan about 5 years ago

Hey Samantha!

Check out this Pen I made for you: http://codepen.io/winghouchan/pen/yFsIn/

The width of the lis is approximately 1 ÷ number of lis (excluding dividers) × 100

Please note it is only approximate as you may have to experiment to get a closer figure. The final figure may be slightly off still but only by a couple of pixels.

Samantha Combs about 5 years ago

Thanks Wing-Hou! My problem is that if you change to the width to, say, 10% the nav elements are no longer centered. How can I keep the elements centered while I increase the width?

Wing-Hou Chan about 5 years ago

Hey Samantha!

Check out my Pen again: http://codepen.io/winghouchan/pen/yFsIn/