Challenge: CSS Navigation

Danny de Vries on October 11, 2018

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 ... [Read Full]
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

code of conduct - report abuse