Mobile Nav Menu by Kevin Powell – Notes


Updated Mar 18th, 2022

Finally watched this Kevin Powell video and this cleared a few things up for me. This is the video in which my current menu’s are based on, (His CSS for nav menu not CSS to toggle. I still use JS for toggle).

He uses the CSS with psuedo class of checked checkbox trick without JS trick. Again, I still use the JS approach.

<!-- Logo goes here -->
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<!-- nav goes here -->
<!-- then add a burger under nav element as a label element -->
<label for="nav-toggle" class="nav-toggle-label"><span></span></label>

He hide the nav as a starting and then target with “.nav-toggle:checked ~ nav” where the tilde denotes any preceding sibling of.

.nav-toggle:checked ~ nav {
  display: block;

But we don’t want a checkbox to toggle we want a burger. So we add a label. Because the “for” attribute for the label is linked to the id clicking the label will also trigger the checkbox. So now we can hide the checkbox with display none and although it won’t be seen it is still there and being clicked on.

He then uses the label to position absolutely with an empty span with ::before and ::after pseudo elements displayed as block to accomplish the “burger from scratch.”

Okay so forget the toggle. This tutorial has a fixed header with high z-index.

Reiterated styles should be mobile first so media queries should be:

@media and screen (min-width: 768px) {

The most important concept discussed was that transitions work best on scale, opacity, transform, and rotation for performance reasons. He hid and showed the mobile menu using the scale property. I reworked the HFRR theme nav and it worked perfectly going from scale(1, 0) to scale (1,1).

Another great tip was the animation delay for the links.

transition: opacity 250ms ease-in-out 300ms;

Where the 300ms is an animation delay which can be helpful for delaying a link opacity transition until the “ul” has become visible. He also mentioned what I’ve noticed before that sometimes animations will only be in one direction so you may need a transition on both blocks to say close a menu faster than you open it.

Also showed cool “line on hover effect” for nav links using the ::before and absolute positioning.

He also said that with SASS you don’t have to go all in you can pick and choose what you like.

They have Emmett snippets for CSS (m0, p2r, w100p).

Shows the use of “unset” to avoid having to re-declare or undo CSS properties for media queries.