Create a responsive navigation nav with no JS

>> YOUR LINK HERE: ___ http://youtube.com/watch?v=8QKOaTYvYUA

Start creating responsive layouts with confidence with my free responsive layouts course: https://courses.kevinpowell.co/conque... • My very first video that I published here is one on creating a navigation. It worked, it looks good, and it's insanely popular (by far my most popular video). The problem is, it isn't responsive and is a bit old school in that it uses floats. • **** An important note, I've edited the CodePen a few times since publishing this. One is to not use `all: unset;` which Edge doesn't support. Another edit, which I talk more about lower in the description, was to make it tab-able **** • In this video, I take that same navigation but I update it to take advantage of modern CSS, making it fixed top, adding a semi-transparent background, creating the dropdown without any javascript, using flexbox and CSS grid to lay it out, and changing up the pseudo-element transitions to be higher performance. • A commenter kindly pointed out that this isn't tabbable, which is an issue and causes accessibility issues. I've updated my CodePen to take this into account. Basically, I changed the 'display: none' on the input, which makes it almost useless, to instead have a position absolute on it and moved it way off screen. Then, I made it so when the input gains focus, the label gets highlighted to give us a visual clue as well. If you'd like to check it out, the codepen link is down below. • Timestamps • 0:00 - introduction • 3:15 - starting the markup • 5:15 - starting the CSS • 13:40 - creating the mobile toggle • 23:55 - adding in the animation • 31:20 - styling it for large screens • 39:00 - adding the pseudo elements • Codepen: https://codepen.io/kevinpowell/pen/jx... • Related videos • CSS Variables: • CSS Variables - An introduction to CS... • Specificity: • CSS Specificity explained • Pseudo elements: • Before and After - CSS Pseudo Elements • Hamburger to X animation: • Video • CSS Grid: • CSS Grid videos • --- • I have a newsletter! https://www.kevinpowell.co/newsletter • New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass • --- • My Code Editor: VS Code - https://code.visualstudio.com/ • How my browser refreshes when I save: • How to automatically refresh your bro... • --- • Support me on Patreon: / kevinpowell • I'm on some other places on the internet too! • If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. • Instagram: / kevinpowell.co • Twitter: / kevinjpowell • Codepen: https://codepen.io/kevinpowell/ • Github: https://github.com/kevin-powell

#############################

New on site