Finally watched this Kevin Powell video and it cleared up a few questions for me. This is the video in which my current menus are based on, (Only the CSS for showing and hiding the menu, I still use JS for the actual toggle).

He uses the CSS-toggle-approach with pseudo 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 hides the “nav” element to start and then targets 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, because that would be very ugly, we instead want a burger. So we add a label element with a “for” attribute that is linked to the input element via the “id” attribute of the input element. So clicking the label will also check/uncheck the checkbox. So now we can hide the checkbox input with display none and it will still function.

Note: The main point of this technique is that it does not rely on JS but the native label/input relationship via the “id and for” attributes along with the pseudo class of “checked” for a input with a type of checkbox.

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

Note: The positioning of the burger icon does not have to be absolute. You can wrap in a container and position with flexbox.

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) {
  .whatevs{}
}

The most important concept discussed in this video

CSS transitions work best on scale, opacity, transform, and rotation for performance reasons. He hid and showed the mobile menu using the scale property via 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 pseudo element and absolute positioning.

Note: As usual, don’t forget to set the content property to an empty string on the pseudo element.

Briefly mentioned with SASS you don’t have to go all in you can pick and choose what features you like.

They have Emmett snippets for CSS (m0, p2r, w100p). I always forget about this although it does not work in tsx files.

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