Stop Making This COMMON MISTAKE With Your Header Menus

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 ***

*** 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!

*** SOCIAL ***

*** 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

[Gearyco]

Note: The main "button" styling should be applied to the "a" and not the "li" to make a proper clickable area for the button. That was a rare oversight. I've already done 100 pushups as punishment.

[OscarObians]

I feel like my CSS IQ just went up a dozen points. Brilliant technique.

[coffeebot]

The "wrong way" is exactly how i've made my menus. Thanks so much. This was really easy to follow along to.

[JoeFletcher]

For Frames users, the "Header Delta" template uses a CTA navigation as described by Kevin the video.

[pluscreator]

I've never felt so seen. Every single bad practice you outlined has been my standard operating procedure for every site. Now I know better & I'll do better. Fantastic video; thanks for putting this out there.

[MarkDendy]

Another excellent tutorial Kevin! Yep I did the classic add a button inside a container and align it right.

I've now corrected it after following your awesome technique. Thanks again for sharing your wealth of knowledge, it is so helpful.

[eLeieZer]

So well explained! I was wondering to myself if I am serious at building website, you show me I need to keep pushing hard. I have also considering to learn JS and PHP for query and stuff. Kudos Kevin, great content as always!

[aruyne]

Kevin here been reading my mind. I swear that whole section of Kevin explaining the mistake is a 100% accurate depiction of me even with the 'Omg I'm a genius' thought.

Thanks for enlightening all of us Kevin. You rock! Viewed, liked and commented.

[AmandaLucaseu]

Pure gold Kevin - love these CSS targetting nuggets

[mcAmendi]

Very good tutorial. Will use this technique everywhere now. Keep it up Kevin!

[pavelstanczuk]

You hit the spot. Thanks to you today I learned a valuable solution that will be a routine for me in the future. I appreciate!

[erika_huber]

Why have I never even thought about doing this? This will also help the sign up link to show up on the site links in the serp! Changing my sites TODAY! Thank you!

[geoffmartyn]

Yet another fantastic video, Kevin. The 'not' negation pseudo class! Headslap moment for me. I've been writing CSS for years and this was new to me. How could I have missed this? Every day is a school day. Love your videos - probably the very best videos in the WP space. Absolutely brilliant as ever.

[stripedgoat]

oh wow, I was doing that totally wrong! Thanks for making this tutorial, I really appreciate it, just like the rest of your videos 🙏🏼

[digwillhachi]

Always appreciate your amazing videos. Thank you !

[wpeasy]

Dude, great content as always. You have become like my coach. I pretty much already know what you are saying. But it is always good to have someone reminding you of the obvious.

One note:
To target a specific DOM segment I normally use :is() instead of :not(). That way you are specifically saying "Just this one".

[achimh]

That wen't deep! Ty for this. Following now and awaiting more good stuff, which seems, you're the man who serves it :-)

[kristoffernygard]

I am learning so much! Thank you so much, Kevin! :)

[eucalyptech]

Very useful tutorial, thank you Kevin !

[metaky]

Kevin, you're a king... I made this mistake several times in the past not willing to study CSS properly :) ... thank you for sharing