Menu bar auto-width

Discussion Ask a question
1

I want to let the menu bar decide its width on its own, since when translating menu items, or adding items, they should always be visible, and not be hidden behind the “more…” dropdown. When setting i.e. the width to 100% and the column width to max-content, it always collapses completely, not showing any items. Any ideas?

2

Here is my method:

  1. Set the menu to go the full width of the screen for starters

  2. Have the menu items fill the whole menu

  3. Do not let them be the same size.

  4. Keep your page names short

  5. Avoid letter-spacing,

  6. Keep font as small as possible yet still legible

  7. When the menu does collapse, find the width and set a break point to have the menu switch to a mobile hamburger menu icon for access to full menu, scrollable from top to bottom, instead of side-to-side.

3

Thanks, @teejay implemented your suggestions, it works pretty well even though I have to set the approximate width of the menu manually (it should not be larger than its container), your tip of using a small font really helped. Looks nicer as well. :yum: