Loading…
My navigation looks fine on a wide screen but its links do not fit in a narrow space.
<style>
nav { display: flex; gap: 12px; }
a { white-space: nowrap; }
</style>
<nav><a>Lessons</a><a>Community</a>
<a>Workshops</a><a>Guidance</a></nav>
CookieSensei starter Q&A · example discussion.
Let the flex items wrap when they run out of room. Add flex-wrap: wrap and a gap, then check the page at narrow widths and with long link labels. Also check for fixed widths or large minimum widths elsewhere. Wrapping is one useful approach; a well-labelled menu may be better for a larger navigation. Avoid hiding important links just to remove a scrollbar.
<style>
nav { display: flex; flex-wrap: wrap; gap: 12px; }
a { white-space: nowrap; }
</style>
<nav><a>Lessons</a><a>Community</a>
<a>Workshops</a><a>Guidance</a></nav>
CookieSensei starter Q&A · example discussion.
