Challenge: CSS Navigation

・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: https://codepen.io/anon/pen/wYebQg

DISCUSSION (13)
 

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 (-:
codepen.io/vasilisvg/pen/VEEPZo?ed...

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.
codepen.io/vasilisvg/pen/gBBgmw?ed...

 
 

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: codepen.io/versavale/pen/VEWKMB

 

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'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...

codepen.io/eblairmckee/pen/OBgjwe

 

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="https://thepracticaldev.s3.amazonaws.com/i/e74vongtncaaalpfi33t.png" />

One line /s

 
 
 

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

codepen.io/Keinchy/pen/RegVYr

 
Classic DEV Post from Apr 20 '18

How do you avoid feelings of entitlement?

At a certain level of achievement in a software, it can be easy to become entit...

Danny de Vries
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.