Stop Making This COMMON MISTAKE With Your Header Menus
HTML-код
- Опубликовано: 31 май 2024
- 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) - automaticcss.com
🔥 Frames - getframes.io
See all my recommended tools here: 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: geary.co/inner-circle/
** SOCIAL **
👉 FB - / marketingkev
👉 LinkedIn - / 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
![Eminem - Houdini [Official Music Video]](http://i.ytimg.com/vi/22tVWwmTie8/mqdefault.jpg)
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.
hehe, lol, but I understand. thank you!
By the way, with ACSS classes is the same? just change the style with vars, but the same way? or are there some special pre-made classes on ACSS to only add to menu item and magic happens? xD
@@danielaldea same way, just with btn variables.
Don't worry Kevin, you are still a professional :)
Hi Kevin, in Oxygen the element css doesn't like curly { } ... how would you apply the css for this for work? Also, does the type of menu element you choose in Oxygen make a difference as they now have the element which can style the 2 end CTAs.
@@websiltd I'd wondered that, then I tried Stylesheets (top-right in Oxygen) rather than Custom CSS, which works only on a particular item.
I feel like my CSS IQ just went up a dozen points. Brilliant technique.
The "wrong way" is exactly how i've made my menus. Thanks so much. This was really easy to follow along to.
For Frames users, the "Header Delta" template uses a CTA navigation as described by Kevin the video.
Does it? For me it's separate button
@@DesignRobPearce Unless they changed it, yes.
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.
💪🏻
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!
Always appreciate your amazing videos. Thank you !
Pure gold Kevin - love these CSS targetting nuggets
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.
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.
Very good tutorial. Will use this technique everywhere now. Keep it up Kevin!
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".
I am learning so much! Thank you so much, Kevin! :)
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!
Thank you for this fantastic tip! I feel like I really learned something which makes sens in web development. Great technique!
Very useful tutorial, thank you Kevin !
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!
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.
🙏🙏
Another great video! Thanks!
That wen't deep! Ty for this. Following now and awaiting more good stuff, which seems, you're the man who serves it :-)
The quality of your videos is amazing.
Great tutorial, thanks.
oh wow, I was doing that totally wrong! Thanks for making this tutorial, I really appreciate it, just like the rest of your videos 🙏🏼
With the new 1.8 menu system, when you add a button inside the nav nestable element, it wraps the button inside an which makes this redundant I guess?
Not sure what you mean. Have a link?
@@Gearyco only on my local machine. Ok so in the video you mention that the mistake people make is using the nav element and then putting a button element at the end. The button is just a button and doesn't actually form part of the navigation so you have to style a menu link to look like a button. With the new menu system in Bricks 1.8 you can stick a button element inside the Nav (nestable) element and it's wrapped inside an so semantically it's now correct and forms part of the navigation.
Boooom! You nailed it, thank you!
Great stuff as usual, thanks again Kevin.
Thank you Kevin, this is great stuff.
Like dropped. Comment dropped! - Thanks for the clear tutorial!
Ciao Chump-Ville - hello new world! Thank you very very much for this amazing content! This whole course is brilliant!
Appreciate you!
Great lesson here. Thanks aggain!
Excellent video. I love your teaching style.
Thank you very much!
Kevin, you're a king... I made this mistake several times in the past not willing to study CSS properly :) ... thank you for sharing
Happy to help!
Do you recommend doing this method as opposed to Bricks Nestable Nav for headers?
Yeh... if doing this the "wrong way" was a crime, I'd be serving a life sentence! Professor Geary is a freggin genius!
👮♀️
You're definitely right that this is the best implementation. What would you do if you wanted to keep the button visible on mobile? Lots of professional services companies like to have a button visible on mobile (ie; a "Call Us" or "Get Estimate" or "Get Quote" button).
Just add a button that is only set to display on mobile devices
Value bomb! Thanks! Margin-inline-start. Never knew! Also good to make the button part of the menu. Is one of the reasons that otherwise the serp in google doesnt show the signup?
Possibly, but hard to say.
Thank you for this video. It was very informative and hit the nail on the head. Just had one question about limitations. On mobile, can you keep the buttons in the header instead of the hamburger menu?
Yes
Kevin, Guilty As Charged on the button fiasco approach UNTIL now. Now I know better and will be able to create better menus using this approach. Thanks.
Great video, great way of explanation and clear i found my self learning more with amazing easy way
Great to hear!
Incredibly valuable!
Damn, watching first 5 minutes, I felt like you were talking about me 😂😂
Great stuff, thanks! I'm just confused why you not targeting the "a" for styling it like a button instead of the container, then making "a" block element so that you have additionally the padding for clicking (like a real button).
It was a rare oversight. I've already done 100 pushups as punishment.
I know I say the same thing: Kevin, you are a gifted teacher and your enthusiasm is catching. A marvelous video. Thank you.
Thanks again!
Super helpful tutorial. I have a good tool in my toolbox now. Thank you sir, very much!
In the beginning, you pretty much described my thoughts, on how to solve that problem :D
I would love to see how to make the mobile menu matching with desktop menu. Would be nice part 2. I know I get greedy, sorry.
Not sure what you mean about making them match?
@@Gearyco Excuse my English :) I meant to have a button in the mobile menu as well. In one word, is it possible to use similar techniques in the mobile menu? Thanks!
Great overview, Kevin. Thanks!
However, in many cases, you do want a button to appear alongside the hamburger menu on mobile. Like, Sign Up, for example. Because it jumps out on mobile and that's exactly what you want. I.e. it sets apart from the nav in the mobile dropdown or off-canvas menu. How would you solve this particular issue?
Add the button so it only appears on mobile.
Does this work for the log in / logout variations of buttons, and also displaying an admin link in headers dynamically. Eg: changing them based on logged state.
I find myself doing it 'the wrong way' but I don't see how this covers that use case.
Yes
Hi Kevin, great video. Small question. We use data attributes to track interactions on our sign up type CTA's. Is there a way to add data attributes to a native wordpress menu item like the one you styled above?
Requires a functions php snippet as far as I know. There are a few online.
So glad I watched this, employed this technique on a site and it worked great. I see you're working locally. Whenever I work locally, I get all sorts of lag with the recognition of changes I'm making to the css. What wizardry are you using? What 9th-level Druid talisman of non-cache-interference are you wielding? What 20-sided die of non-chumpitude did you roll, kind sir?
😂 idk. My Mac is fast?
Very good video ✌🏼
Hi Kevin, In this video you mention setting up a nav with the correct accessibility settings etc. Which video covers this?
It’s in the PB101 course I believe
Thanks it's so powerful. I have a question.
How to make the last button stick on the right (that's ok) but the other link centered in the header bar. I hope I'm clear. Thanks a lot Kevin !
It’s possible. I’d have to show it.
I;m still searching for the answer to this.
How do you get the main link perfectly in the center when the logo is on the left and the two buttons fly off to the irght@@Gearyco
You might be using " *God Forbid* " Elementor or Beaver Builder...... hehehe I love that.
Where to put the WPML language switcher (Bricks working on WPML and Polylang compatibility)? Usually, it is located on the right along with the menu.
As a separate button in the header. It’s not part of navigation.
Thanks, Kevin! Just what the doctor ordered… was trying to figure this out. Still, if I want the menu links centered exactly half way between the logo and the “button” how to do it without simply adding margin to the first child as it may not be precise. Thank you!
Just add 'margin-inline-start: auto' to 'root > nav:not(.bricks-mobile-menu-wrapper) .nav-cta'
How do I change the current color for just that CTA button? It seems no matter what CSS I write, Bricks has a more specific selector that always overrides my CSS.
Shouldn’t be hard. Ask in inner circle we can help you there
GREAT Content Kevin. What would be the best way to have this button (navlink) open a modal pop-up?
Class trigger. Frames has a modal element that’s super simple to add and trigger.
Great video as always Kevin
In general, i don't think it's a mistake to put a CTA button in the main nav, because it's always there and i want it to be prominent. Accessibility works flawlessly, if the button is in the nav container.
The technique I just showed is what puts it in the nav container.
Is there a way to set aria-label to these new items ? Thanks, fantastic video!
To what items?
What do you do if you want the menu to be centered between the log and the CTA? Every idea I am coming up with doesn't really make it responsive.
Read comments. I posted a solution to two users who asked the same.
@@Gearyco thanks!
Great lesson, Kevin! I wonder why you didn't use a grid. If this makes sense, can you do a video about it?
Cheers!
Grid for nav isn’t a great use. Causes alignment issues
When I have a primary menu and secondary menu on top, most of the time I hide them in mobile and show a complet full menu mobile (3 menus total) it is a bad technique do you have a other way.
Thanks! Learned something from this video.
I want something like this.
Logo on the left, then the main navigation is center, then the CTA button on the right. How can I achieve that with this method? Avoid manual calculation.
did you find a solution?
@@bjon3048 nope
You know how long I've been struggling to get the elements aligned like this on my laravel/ bootstrap site? It aggravated me so much I came to wordpress to see if I can build my app a bit faster (the answer is no as there's many other challenges now) but I'll have to try this fix tomorrow.
Now I'm wondering though if I have other elements like search bars and such, would it work to add the whole grouping in a div and position that? Or should I just push that first right hand element over
I’d need to see a mock-up
@@Gearyco how can I send that
Wonderful. Thank you. I did this and the client says he wants the button to be outside of the menu on the mobile version. He wants people to see the button in the mobile header when they land on the page. Initially, I think to then create a button separate from the menu for mobile only - but I guess there is a more professional way of doing it? Do you have thoughts there? Do you have a video about that?
Leave it as is and add a button that only shows on mobile
Thank you. Your stuff is so great and your comments are wonderful. I will be signing up for your monthly membership.
You are really one of the best instructors and coaches in the WP-Space! Also have to sign-up for the inner circle. So many great tidbits for free can't imagine how much more value is in your IC. Stop being a chump! 😀
Thank you!
Great video. Header foxtrot has a section with a contact button and text in it, is that being changed?
Probably.
As usual excellent.
Kevin, could you please make a tutorial on how to make complex Woo headers which have 2 menus (main and category) and also mini cart, probably having a minimum 2 rows... and then what to do with the mobile menu.
At the moment I'm working on a client Woo site and I had to display "none" many parts on the mobile menu. First to make it easier I decided to build 2 separate headers, one for desktop and one for mobile to be easier what to put inside each, but I figured out on Woo sites, because of the mini cart, I can't use this element 2 times, because then just the first mini cart will work. And that's why I have to work with one section and try to hide all blocks or items that I don't need to have on mobile, which gives me a headache.
+1
Would like to see this too
Thanks Thanks Thanks. It look like I have never learn css. Thanks. This video solve a lot of problems.
What if you want your logo to be in the middle, main nav on the left, cta on the right next to social links? Any videos for that?
I highly recommend not putting social links in the header. Big no-no. A centered logo is possible, but adds a lot of complication.
How did you add more break points to the bricks builder? Is that Automatic CSS
No it’s an option in settings
Kevin, I'm absolute noob so please let me know if I'm off base. I have followed this video and voila I have the makings of a useful and responsive header. Then I purchase Frames (very nice by the way) I want play with header Bravo and low and behold the cta is outside the nav. I'm just curious which directions, or reasons, to follow?
We initially thought it might be too advanced for many users, but we are going to go back through and make them all consistent with the method taught in this video.
Wow amazing
Thank you, Kevin! Couldn't sleep and got up at 2AM. So what should I do now? Oh, there's a new video from Kevin; let's watch that, and as usual, I learned something I didn't know how to do in detail. Now I can go back to sleep and fix it in my head :)
🛌
Nice. Any idea how to put the CTA to the right like in your video BUT the menu is centered ?
Margin left auto on the first child.
@@Gearyco Oh my God, thank you so much man! You're the King of CSS!
I do it the "wrong" way because I still want the CTA buttons viable in the header on mobile, while the regualr website nav goes into the burger.
Any proper way to achieve this?
Add a button to the header that’s only visible on mobile
Great Video! I learned a lot about custom CSS.
I have always made the mistake until now, then hidden on mobile and pasted again manually. Oh my God...
But I still have a question, now only the text is clickable, how do you achieve that the whole button is clickable?
Add all the padding and actual styling to the “a” instead of the li.
@@Gearyco Thank you 🙏🙏
What about inserting a button widget into the nested navigation widget? Would that be semantically incorrect?
It needs to be in an
I have a problem with the class is not for the mobile menu on oxygen. Brick use: .bricks-mobile-menu-wrapper while Oxygen use something like this: oxy-nav-menu oxy-nav-menu-dropdowns oxy-nav-menu-dropdown-arrow oxy-nav-menu-open. Try many times and it does not work like in the tutorial. Can you help to do similar but using oxygen as well?
Not sure what you're asking exactly ... need more details. Ask in the Inner Circle and a bunch of people can help you.
Is there a reason why this is not directly integrated in the header frames with a button like the Bravo?
After our spring cleaning it will be
margin-inline-start: auto; doesn't work for me!
I can use % or rem, but Auto do nothing to the last item. What am I missing?
Would need a link.
@@Gearyco Hey Geary, thank you for reacting to my question.
Long story short, I'm building a website for my own business.
My designer is working on the Wireframe right now, and I'm preparing Wordpress and doing some tests.
The page builder I'm using is BreakDance. I know you're not "crazy" about it, but I thought giving it a try, since it's only one website, and I already have a license from Oxygen that I purchased about a year ago.
I played with the header and tried to isolate the last item (contact) like you did in the video, but for some reason the "auto" won't work. If I set it to 50px or 50% it works just fine.
The menu was inside a div together with a logo. I made sure the div width is 100%.
The more I played with it, the more funky things started to happen to the menu, so I decided to make a new WordPress install.
Would you still recommend me to get Bricks even though I'm only going to use it for one site? Or should I just stick to Breakdance and give it another try?
why is the button in the Frames Header Bravo template not in the ul li?
It’s complicated
Thanks! I also did it wrong the whole time! Question: How can I add an JetEngine AJAX search widget to the nav menu?
Haven't ever used JetEngine, so not sure.
I don't want to play CounterStrike with this Dude when he's targeting his Li's.
Is it recommended to use the same approach to add the search inside the menu?
How I can add the icon?
no, a search input isn't a navigational element.
It was just ten minutes ago, as I scrolled myself to Misc > Display > None that I remembered this video was in my watchlist. 😆
gold ! , pls guide how we can have 2 sets of menu on the same container.
Amazing video, thanks! One thing - the hamburger menu going nuts and not sitting next to the logo.. how do I fix that? The usual tricks arent making it go where I want it. (Bricks, btw)
If you have the menu set to 100% width, it needs to change to "auto" at the breakpoint where the hamburger appears.
@@Gearyco perfect, works like a charm - thank you!
I think the video quality can improve, it needs to be sharper because having it on 720p looks like its on 480 and so on and it makes it less convenient to read small text
Huh?
Whitney Houston: I believe the children are our future.
Kevin Geary: I don't care about all the other children.
Subsribed..>!!!!!!!! Thank you so much
How would you go with adding an svg icon to the Sign Up button? 🤔
Bricks has an icon button element I believe. Or you can do it yourself by creating a button with a div.
You explain anything so great. Do you have any plan to teach important topics of css and html that we should learn?
It will be valuable if you just publish a video per week ❤️
You mean like the basics?
@@Gearyco Yes, actually the basics that are important when using sth like bricks builder. To not just rely on bricks and being able to keep forward and do the job.
@@mehdimoradi603 Yes, I agree. But there are so many channels/videos on the basics :/
@@Gearyco Yes but also will be great to make videos like the current one (Menus)
😅🙏
Funny thing is, you also did in wrong in some Frames... ;) I just checked header-bravo and you also use a nav plus a button there.
It was initially for ease of use for users, but we made the decision to switch it to the correct way even if it’s slightly more complicated initially. That’s one of the reasons for this video - so we have something to link to to help explain 😉
@@Gearyco Yeah, sure... Be honest, you didn't know better before your own video 🤣
hi, is there quick way to learn CSS? I only want to learn CSS for WordPress
There are many basic CSS courses
Kevin Geary is my favorite!!!
🙌
I’m building a menu exactly like this and I’ve used two buttons lol. I guess this came at the right time. 😊
Everyone does it!
@@Gearyco this is so flexible though with a lot of control. I need to watch the video on ACSS and variables because I’m still using em and rem units for my values.
Any way to stack the final two buttons in a vertical?
Which buttons?
@@Gearyco Like when you separate the Contact Us and Sign Up and push them to the far right, sometimes I like to stack those two options vertically
@@adamzonnis980 just put them in a wrapper and you can do whatever you want with them
@@Gearyco For sure. I just don't know how to wrap to menu items, and still have them be part of the nav. Is there a wrapper element in the menu admin?
We need a video about making dynamic menu
Dynamic menu?
Like products categories menu or custom post type categories.@@Gearyco
Buttons outside the menu..... is chumpy