Challenge: CSS Navigation

twitter logo github logo ・1 min read

Here's a quick challenge I came up with the other day. A very common navigational pattern is to put the logo on the left side and the list items on the right.

Navigation pattern screenshot

Recreate the layout of this navigation with as little html and css as possible.

My personal solution uses flexbox with 7 lines of html and 13 lines of css. Is it possible with less?

EDIT: This is wat I came up with:

twitter logo DISCUSS (13)
markdown guide

Hey Danny, fun challenge!
I've got 5 lines of html and 11 of CSS (13 with proper spacing), using CSS grid.

Are Item 1 and item 2 links? If so, I'm up to 13 lines of css (15 with spacing, adding text-decoration: none; and color: #000000; to ovveride browser link styling). Here's my solution:


Nice one! Neat trick with CSS grid, might Flebox be better suited for this?


Unfortunately I'm not that familiar with Flexbox, that's why I'm really interested in your solutions :)


I think navigation should be part of the footer. So I put it there, where it should be. And then I think that if you don’t add interactivity you might as well use an image. So I added a few link states as well. Some extra lines of CSS because it’s the web, not an image editor (-:

But then, to be honest, I think most of the time these links are really not needed. Who ever clicks on a navigation? Such an overrated pattern! So instead of a lonely <ul> I would urge everybody to wrap it in something like a <details> with a clear <summary>, so you won't bother people with things they don’t need. In this case you need a lot less CSS, because you don’t really need any layout.


I'm stuck at 7 and 14 with CSS grid... great challenge! Got the gears turning :-)
There must be a way to do the grid shorthand...


Blair, if you use grid, I don't think it is necessary for you to use a list. You could be down to 5 lines of HTML :)


For semantic purposes I would use list item here. But indeed, it can be done without.

<img src="" />

One line /s


i really tried not to over think this:
7 lines in html
12 lines in css
gotta love Flexbox


Smart solution! I used another alternative.

Classic DEV Post from Aug 28 '18

Who's looking for open source contributors? (August 28 edition)

Please shamelessly promote your project. Everyone who posted in previous weeks ...

Danny de Vries profile image
A digital native focussing on design systems, brand identity and creative coding to help digital products take shape. My approach is organized, systematic and inclusive.

👋 Hey reader.

Do you prefer sans serif over serif?

You can change your font preferences in the "misc" section of your settings. ❤️