ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
Stop Making This COMMON MISTAKE With Your Header Menus
ฝัง
- เผยแพร่เมื่อ 16 ส.ค. 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...
** 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
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.
The "wrong way" is exactly how i've made my menus. Thanks so much. This was really easy to follow along to.
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.
💪🏻
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 feel like my CSS IQ just went up a dozen points. Brilliant technique.
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.
Thank you so much! Was looking for exactly this when I realised my contact link wasn't appearing on mobile. I knew the problem but not the solution :]
Ok, first 5 minutes is what I was doing like a week ago, exactly my thought processes, setting the conditions and everything 🤣 that's so funny
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!
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!
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.
Yeh... if doing this the "wrong way" was a crime, I'd be serving a life sentence! Professor Geary is a freggin genius!
👮♀️
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.
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
That wen't deep! Ty for this. Following now and awaiting more good stuff, which seems, you're the man who serves it :-)
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!
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.
Pure gold Kevin - love these CSS targetting nuggets
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!
Ciao Chump-Ville - hello new world! Thank you very very much for this amazing content! This whole course is brilliant!
Appreciate 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.
🙏🙏
Damn, watching first 5 minutes, I felt like you were talking about me 😂😂
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.
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 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
Very good tutorial. Will use this technique everywhere now. Keep it up Kevin!
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?
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?
@@bjoernzosel nope
oh wow, I was doing that totally wrong! Thanks for making this tutorial, I really appreciate it, just like the rest of your videos 🙏🏼
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!
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".
You might be using " *God Forbid* " Elementor or Beaver Builder...... hehehe I love that.
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.
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
Like dropped. Comment dropped! - Thanks for the clear tutorial!
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!
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
Thank you for this fantastic tip! I feel like I really learned something which makes sens in web development. Great technique!
I am learning so much! Thank you so much, Kevin! :)
Very useful tutorial, thank you Kevin !
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!
I don't want to play CounterStrike with this Dude when he's targeting his Li's.
Always appreciate your amazing videos. Thank you !
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 :)
🛌
It was just ten minutes ago, as I scrolled myself to Misc > Display > None that I remembered this video was in my watchlist. 😆
The quality of your videos is amazing.
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.
Boooom! You nailed it, thank you!
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 🤣
Great tutorial, thanks.
Is there a way to set aria-label to these new items ? Thanks, fantastic video!
To what items?
Great video, great way of explanation and clear i found my self learning more with amazing easy way
Great to hear!
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
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'
Another great video! Thanks!
Great lesson here. Thanks aggain!
Excellent video. I love your teaching style.
Thank you very much!
Whitney Houston: I believe the children are our future.
Kevin Geary: I don't care about all the other children.
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.
Thank you Kevin, this is great stuff.
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
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 Thanks Thanks. It look like I have never learn css. Thanks. This video solve a lot of problems.
Incredibly valuable!
Kevin Geary is my favorite!!!
🙌
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?
You have earned a subscriber. 👍🏻
Great stuff as usual, thanks again Kevin.
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.
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.
gold ! , pls guide how we can have 2 sets of menu on the same container.
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
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 video. Header foxtrot has a section with a contact button and text in it, is that being changed?
Probably.
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.
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?
What about inserting a button widget into the nested navigation widget? Would that be semantically incorrect?
It needs to be in an
why is the button in the Frames Header Bravo template not in the ul li?
It’s complicated
Wow amazing
Do you recommend doing this method as opposed to Bricks Nestable Nav for headers?
We need a video about making dynamic menu
Dynamic menu?
Like products categories menu or custom post type categories.@@Gearyco
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.
Very good video ✌🏼
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.
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.
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 🙏🙏
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!
How did you add more break points to the bricks builder? Is that Automatic CSS
No it’s an option in settings
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
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!
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.
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
Buttons outside the menu..... is chumpy
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!
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.
Great video as always Kevin
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.
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
I'm off to re do every site I've ever done...
Subsribed..>!!!!!!!! Thank you so much