Stop Making This COMMON MISTAKE With Your Header Menus

Video Description

There's a common mistake people make when building header menus that I see repeatedly. It has to do with menu items that must be represented visually as buttons, icons, or separate links. Even though these items are visually different and sometimes listed separately, they should almost always be part of the main navigation. But, when you physically make them exist outside your main navigation as independent elements, they're no longer part of your navigation. This negatively impacts accessibility and semantic HTML, but it also negatively impacts your mobile menu experience. To include these independent elements in your mobile menu, which is almost always desirable, you must create two separate menus, use some conditional logic, or create a spaghetti soup of CSS conditions. OR... OR... Hear me out... You could avoid the mistake of adding these items to your header as separate elements altogether. Instead, add them to your main navigation as normal menu items and then use some simple CSS targeting to style them and position them independently. I'll show you how to do exactly that in this tutorial. PS I'm not saying that it's *never* okay to have more than one navigation in your header. But if you do, the second navigation needs to be structured properly and it needs to be identified as an independent menu with an aria label. The people making the mistake I'm referring to aren't doing this. *** MY TOOLS *** 🔥 AutomaticCSS (ACSS) - https://automaticcss.com 🔥 Frames - https://getframes.io See all my recommended tools here: https://geary.co/tools/ *** INNER CIRCLE *** Step up your design/dev game, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back. ⭕ In-depth design & dev trainings ⭕ Business, sales, & marketing trainings ⭕ Agency resources & downloadables ⭕ Vibrant, quality community with zero toxicity ⭕ ...and much more! Learn more and join here: https://geary.co/inner-circle/ *** SOCIAL *** 👉 FB - https://www.facebook.com/marketingkev/ 👉 LinkedIn - https://www.linkedin.com/in/kevingeary/ *** CHAPTERS *** 0:00 Intro 0:40 Getting Started 01:26 What This Video Isn't About 2:00 The Big Mistake 05:36 The Better Way