Justified Horizontal Menu – CSS & Javascript Solutions

Recently I wanted to use a horizontal navigation menu on a website. I wanted the items in the menu to be evenly distributed across the width of the page, but also butting up against each other, with no space between each item. The other requirement was that the spacing between the text of each item should be equal.

Fluid width menu with justified items, each one with the same padding applied
Fluid width menu with justified items, each one with the same padding applied

Same menu on a smaller width screen, demonstrating the fluid sizing
Same menu on a smaller width screen, demonstrating the fluid sizing

Continue reading

Posted on by xoogu, last updated