Stop Making This COMMON MISTAKE With Your Header Menus

[@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.

[@danielaldea]

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

[@Gearyco]

@@danielaldea same way, just with btn variables.

[@wpeasy]

Don't worry Kevin, you are still a professional :)

[@websiltd]

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.

[@theartofmusic5000]

@@websiltd I'd wondered that, then I tried Stylesheets (top-right in Oxygen) rather than Custom CSS, which works only on a particular item.

[@coffeebot3000]

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

[@OscarObians]

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

[@JoeFletcher]

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

[@DesignRobPearce]

Does it? For me it's separate button

[@JoeFletcher]

​@@DesignRobPearce Unless they changed it, yes.

[@plus1creator]

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.

[@Gearyco]

💪🏻

[@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.

[@SEO_Mastermind.]

Thanks for sharing brilliant techniques. This video helps me with my clients' projects

[@mrianforest]

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?

[@Gearyco]

Not sure what you mean. Have a link?

[@mrianforest]

@@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.

[@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!

[@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.

[@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!

[@achimh5468]

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

[@alexander-van-aken]

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?

[@Gearyco]

Possibly, but hard to say.

[@AmandaLucaseu]

Pure gold Kevin - love these CSS targetting nuggets

[@TexasWatchman]

Yeh... if doing this the "wrong way" was a crime, I'd be serving a life sentence! Professor Geary is a freggin genius!

[@Gearyco]

👮‍♀️

[@ruemorg7]

Like dropped. Comment dropped! - Thanks for the clear tutorial!

[@milkrow]

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?

[@Gearyco]

😂 idk. My Mac is fast?

[@mcAmendi]

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

[@propeldigital]

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).

[@Gearyco]

Just add a button that is only set to display on mobile devices

[@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".

[@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.

[@Gearyco]

🙏🙏

[@kimsquizzes]

You might be using " *God Forbid* " Elementor or Beaver Builder...... hehehe I love that.

[@vilassa]

Great lesson, Kevin! I wonder why you didn't use a grid. If this makes sense, can you do a video about it? Cheers!

[@Gearyco]

Grid for nav isn’t a great use. Causes alignment issues

[@bhibli6722]

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 :]

[@kensyypurp]

A fantastic approach to teaching!

[@Nima-Norouzi]

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.

[@benjamindekatviseur9520]

+1 Would like to see this too

[@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

[@Gearyco]

Happy to help!

[@davidleeroth805]

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.

[@Gearyco]

The technique I just showed is what puts it in the nav container.

[@SJ-jv1tg]

Ciao Chump-Ville - hello new world! Thank you very very much for this amazing content! This whole course is brilliant!

[@Gearyco]

Appreciate you!

[@garethmcewan]

Hi Kevin, In this video you mention setting up a nav with the correct accessibility settings etc. Which video covers this?

[@Gearyco]

It’s in the PB101 course I believe

[@karimabderrahmani4648]

Damn, watching first 5 minutes, I felt like you were talking about me 😂😂

[@tolkienomics]

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?

[@Gearyco]

Yes

[@LupusDesign]

I know I say the same thing: Kevin, you are a gifted teacher and your enthusiasm is catching. A marvelous video. Thank you.

[@Gearyco]

Thanks again!

[@zatli6277]

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

[@LudovicCharlier]

The quality of your videos is amazing.

[@bartderuyck]

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?

[@Gearyco]

Add the button so it only appears on mobile.

[@StnurTube]

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.

[@Gearyco]

Not sure what you mean about making them match?

[@StnurTube]

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

[@MichaelFidelis]

great work Kevin! Thank you.

[@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!

[@davidwalls2304]

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.

[@Jornes83]

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.

[@bjoernzosel]

did you find a solution?

[@Jornes83]

@@bjoernzosel nope

[@TheTrentmoller]

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 !

[@Gearyco]

It’s possible. I’d have to show it.

[@websiltd]

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

[@kristoffernygard7255]

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

[@digwillhachi]

Always appreciate your amazing videos. Thank you !

[@TeddyPetcu]

Thank you for this fantastic tip! I feel like I really learned something which makes sens in web development. Great technique!

[@bradburyrobinson]

Whitney Houston: I believe the children are our future. Kevin Geary: I don't care about all the other children.

[@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 🙏🏼

[@eucalyptech]

Very useful tutorial, thank you Kevin !

[@bradburyrobinson]

It was just ten minutes ago, as I scrolled myself to Misc > Display > None that I remembered this video was in my watchlist. 😆

[@IEVolleyBallNerd]

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?

[@Gearyco]

Requires a functions php snippet as far as I know. There are a few online.

[@JuanDuron]

GREAT Content Kevin. What would be the best way to have this button (navlink) open a modal pop-up?

[@Gearyco]

Class trigger. Frames has a modal element that’s super simple to add and trigger.

[@jugibur2117]

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).

[@Gearyco]

It was a rare oversight. I've already done 100 pushups as punishment.

[@alexanderbeutl]

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?

[@Gearyco]

Add all the padding and actual styling to the “a” instead of the li.

[@alexanderbeutl]

@@Gearyco Thank you 🙏🙏

[@potti-webdesign7623]

I don't want to play CounterStrike with this Dude when he's targeting his Li's.

[@jasonfc3844]

Is there a way to set aria-label to these new items ? Thanks, fantastic video!

[@Gearyco]

To what items?

[@derekshort]

Another great video! Thanks!

Great tutorial, thanks.

[@amrfarrouh]

Great video, great way of explanation and clear i found my self learning more with amazing easy way

[@Gearyco]

Great to hear!

[@DesignRobPearce]

Great video. Header foxtrot has a section with a contact button and text in it, is that being changed?

[@Gearyco]

Probably.

[@Mclouds_Creative_Corner]

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 :)

[@Gearyco]

🛌

[@Kh4N]

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

[@Gearyco]

Thank you!

[@LastKingOfAtlantis]

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)

[@Gearyco]

If you have the menu set to 100% width, it needs to change to "auto" at the breakpoint where the hamburger appears.

[@LastKingOfAtlantis]

@@Gearyco perfect, works like a charm - thank you!

[@TobiasGronbach]

Boooom! You nailed it, thank you!

[@JasonSmith-yz6nd]

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?

[@Gearyco]

Leave it as is and add a button that only shows on mobile

[@JasonSmith-yz6nd]

Thank you. Your stuff is so great and your comments are wonderful. I will be signing up for your monthly membership.

[@mariajackson8923]

Excellent video. I love your teaching style.

[@Gearyco]

Thank you very much!

[@alexeygretskiy5772]

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!

[@AmandaLucaseu]

Just add 'margin-inline-start: auto' to 'root > nav:not(.bricks-mobile-menu-wrapper) .nav-cta'

[@christophheine4725]

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.

[@Gearyco]

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 😉

[@christophheine4725]

@@Gearyco Yeah, sure... Be honest, you didn't know better before your own video 🤣

[@mahnmal-zj]

Thanks! I also did it wrong the whole time! Question: How can I add an JetEngine AJAX search widget to the nav menu?

[@Gearyco]

Haven't ever used JetEngine, so not sure.

[@ReubenHochstetler]

Incredibly valuable!

[@Fusion360NewbiesPlus]

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?

[@Gearyco]

Would need a link.

[@Fusion360NewbiesPlus]

@@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?

[@AutomatedFunnelSystems]

Great stuff as usual, thanks again Kevin.

[@davispe]

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?

[@Gearyco]

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.

[@ArielBerloto]

Thank you Kevin, this is great stuff.

[@pedrocosta3818]

Great lesson here. Thanks aggain!

[@VirendraBG]

You have earned a subscriber. 👍🏻

[@jcc5018]

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

[@Gearyco]

I’d need to see a mock-up

[@jcc5018]

@@Gearyco how can I send that

[@baliflorent6971]

Thanks Thanks Thanks. It look like I have never learn css. Thanks. This video solve a lot of problems.

[@TimbosFoodBox]

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?

[@Gearyco]

I highly recommend not putting social links in the header. Big no-no. A centered logo is possible, but adds a lot of complication.

[@pahtashow]

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.

[@Gearyco]

As a separate button in the header. It’s not part of navigation.

[@banksoor]

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

[@Gearyco]

Huh?

[@filmgenius2]

How did you add more break points to the bricks builder? Is that Automatic CSS

[@Gearyco]

No it’s an option in settings

[@LudovicCharlier]

Nice. Any idea how to put the CTA to the right like in your video BUT the menu is centered ?

[@Gearyco]

Margin left auto on the first child.

[@LudovicCharlier]

@@Gearyco Oh my God, thank you so much man! You're the King of CSS!

[@benjaminpau3982]

What about inserting a button widget into the nested navigation widget? Would that be semantically incorrect?

[@Gearyco]

It needs to be in an

[@BenjaminMolini]

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.

[@Gearyco]

Shouldn’t be hard. Ask in inner circle we can help you there

[@Jensomat]

It is so interesting to watch how you solve these issues. I could watch hours and learn. But sometimes you navigating a bit too fast in the UI. 😂

[@Gearyco]

I’ll try to slow down

[@Jensomat]

@@Gearyco That would be great! 🤘

[@poontowngalactic1213]

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.

[@Gearyco]

Yes

[@JasonSmith-yz6nd]

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.

[@Gearyco]

Read comments. I posted a solution to two users who asked the same.

[@JasonSmith-yz6nd]

@@Gearyco thanks!

[@deehrk]

gold ! , pls guide how we can have 2 sets of menu on the same container.

[@bloggerkickstart9060]

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?

[@Gearyco]

Not sure what you're asking exactly ... need more details. Ask in the Inner Circle and a bunch of people can help you.

[@Jmfwebdesign]

Great video as always Kevin

[@SamanticsNL]

Is there a reason why this is not directly integrated in the header frames with a button like the Bravo?

[@Gearyco]

After our spring cleaning it will be

[@IssaKhlief]

Is it recommended to use the same approach to add the search inside the menu? How I can add the icon?

[@Gearyco]

no, a search input isn't a navigational element.

[@microice-]

Very good video ✌🏼

[@GavinDavidson]

I’m building a menu exactly like this and I’ve used two buttons lol. I guess this came at the right time. 😊

[@Gearyco]

Everyone does it!

[@GavinDavidson]

@@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.

[@ReheatedDonut]

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?

[@Gearyco]

Add a button to the header that’s only visible on mobile

[@bjoernzosel]

why is the button in the Frames Header Bravo template not in the ul li?

[@Gearyco]

It’s complicated

[@filmgenius2]

Wow amazing

[@mehdimoradi603]

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 ❤️

[@Gearyco]

You mean like the basics?

[@mehdimoradi603]

@@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.

[@Gearyco]

@@mehdimoradi603 Yes, I agree. But there are so many channels/videos on the basics :/

[@mehdimoradi603]

@@Gearyco Yes but also will be great to make videos like the current one (Menus) 😅🙏

[@martinboisclair4104]

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.

[@HaifengZhu-pn3uq]

hi, is there quick way to learn CSS? I only want to learn CSS for WordPress

[@Gearyco]

There are many basic CSS courses