How to Use The Bricks Builder Nav Menu: Beginner's Guide

The new nav menu builder that came in Bricks 1.8 is brilliant.... but it's also a bit intimidating.
So in this video I walk you through step-by-step how to build a nav menu with the new nav menu builder in Bricks-100% beginner friendly.
GRAB YOUR FREE PDF CHEATSHEET:
davefoy.link/b...
FREE BRICKS MASTERCLASS:
davefoy.link/b...
LEARN BRICKS BUILDER STEP-BY-STEP:
davefoy.link/b...
Video: is the OLD nav menu builder better in some situations?
• Bricks Builder Nav Men...
Bricks menu builder docs:
academy.bricks...

[@toby-green]

Best explanation of the Nav Nestable I've seen yet. One thing I noticed is that if you have the site at Tablet resolution (on a desktop) and then scale it back out to desktop, the mobile menu stays and the close toggle vanishes. On..... Elementor.... there was a setting to close the menu by clicking anything other than a menu item (at least I think there was , but can't be certain - my subconscious has buried a lot of the Elementor experience). This is a small thing and may be because of the break point at which I added the close toggle - do elements hide if you add them at a certain break point? Will have to check... But anyway, like everything Bricks, the menu is simple to work with.

[@CraigHines13]

Great video, Dave! I'm sure many people will find this helpful. Also, for anyone who might still be confused about the difference between the "Active" menu item state and the ":active" pseudo-class, here's the explanation: As Dave mentioned, the "Active" state for the menu items is meant to style the specific menu item for the page the visitor is currently viewing -- basically a "YOU ARE HERE" designation -- but this shouldn't be confused with the :active pseudo-class state. Instead, the :active pseudo-class is intended for accessibility purposes for visitors that might be using screen readers and keyboard navigation. Consider it basically the equivalent of the :hover pseudo-class when a visitor is using a mouse to navigate, but that doesn't help with keyboard navigation because they aren't "hovering" over the item. So, :active to the rescue, which WILL activate whenever the keyboard user has selected that menu item. Also, :focus is another similar pseudo-class that you may want to consider using for accessibility purposes. Therefore, :hover, :active, and :focus all achieve essentially the same thing, but for different purposes. That's why I usually consider it a good measure to not only style your links for the :hover state, but then also duplicate the same settings for the :active and :focus states, too. That way, when someone using keyboard navigation or something other than a mouse interacts with the page content, menu, and links, they will basically have the same visual feedback as the person using a mouse. Accessibility is important, so don't neglect those settings and prevent visitors from having a great experience on your sites! Hope that helps!

[@DaveFoy]

This is a brilliant point, Craig, and yeah, one I skipped over here in rushing ahead. 🤦🏼‍♂️ Thanks!

[@CraigHines13]

@@DaveFoy you are most welcome, Dave. You covered a lot in the video, so it's easy to miss. I'm glad you found it helpful.

[@HelenRyle]

Great to see you back on KZbin Dave. You're an excellent teacher and your Bricks course has been invaluable in helping me to upgrade my websites to Bricks from older pagebuilders.

[@DaveFoy]

Huge thanks Helen. Always a pleasure.

[@om78692]

One of the best teacher i had and have for my adventure in web dev world Thank you

[@GaelyneGasson]

Nice to see you back on KZbin. Hey when you get a minute... Have you created a video just about Bricks and why someone like me (a one person agency) might be interested in learning yet another builder? If so, I'd love to see it! If not ... why not? I'm sure there are others like me curious and would love some comparisons.

[@DaveFoy]

Hey Gaelyne. Yeah this is a great idea. It's on my list!

[@jason-m]

Perfect! Thanks Dave. More Bricks content please. Also, if I couldn't hear your voice I would only have to look at your arms to know it's in a British accent 😂

[@DaveFoy]

First time someone’s told me I’ve got British arms, but I’ll take it. 😂

[@jason-m]

Haha the tan line from our (barely) British summer, just warm enough for T-shirts so far

[@DaveFoy]

@@jason-m Tell me about it! Milk bottle white and nice tan clashing beautifully at the seams of my t-shirt 😂😂😂 (how are we supposed to even these damn things out with our weather?!?)

[@ulfkrueger-hh]

I took the unusual path: Coming from your course and now learning, you also do youtube videos! 😂 Great to see you here, also 🎉

[@DaveFoy]

No harm in doing things backwards, Ulf! It's nice to be unconventional.

[@OceanLlamaMedia]

This is possibly the best tutorial I've ever seen on anything. Just signed up for you class.

[@DaveFoy]

I don't think comments get better than this, Eric! Thank you so much.

[@OceanLlamaMedia]

@@DaveFoy No problem, thanks for teaching your skills to the world. I looked up your "about" section today and saw that you were a teacher. That really shows in how well you explain things, then show the wrong way to make something and then the right way. I've never seen a teacher break down a subject as well as you, but I assume that it's partially because they "have to tick off boxes" like you mentioned. Also thanks for the welcome video message you sent out. I've never seen anyone do something like that before and was blown away by it.(I'll have to keep that in mind for any future work I do with clients) At first I couldn't tell if it was a canned message as I missed the first couple seconds while turning up my audio, but you mentioned my name and I was like "dang, he actually sent out a custom message to me." So often everything online feels anonymous, but it seems like you actually care. The world would probably be way different if more people were like you. Sorry for the long response. Just wanted to say thank you!

[@DaveFoy]

That's brilliant, thank you. Yes, I recorded the message individually. I use Bonjoro, it's fantastic. They have an app that makes it really easy. I reckon your clients would love it. :) Huge thanks for joining the course!

[@grantmcgregor3362]

Ive started just giving the one toggle a z-index of 10000 (your open toggle) then having it animate the close icon. Works really well and avoids having to think about its location as it is simply shining through the canvas

[@ElementoryMyDearWatson]

I'm just wondering if it was possible for them to have made this any more complex, confusing, and unintuitive. Many thanks, Dave, a lifesaver. I hope there are more in-depth tutorials about the off-canvas and mega menus on the menu :) Something I wouldn't mind paying for if you had a small course in mind.

[@annieminton9185]

Thanks so much for making the PDF tutorial! Much faster than following a video. I wish everyone did that.

[@DaveFoy]

Yeah I think it's nice to have a cheatsheet to refer to, maybe once you've watched the video and got the gist. Glad you like.

[@chillydoog]

I love your shirt! Great tutorial man, keep it up 🤙

[@DaveFoy]

First person to notice. :)

[@chillydoog]

​@@DaveFoy Well, I might have a bit of a home advantage-it's hard to miss a South Park reference when you're from Colorado.

[@thierry-leadway]

Wait... Were you thinking you'd get away with free Bricks tuts on YT without telling me?? Busted Foy! Thou shall be followed closely! 🤪

[@DaveFoy]

Guilty! 😂

[@bluefuzecom]

So good to have you back and especially doing Bricks content. Honestly, a real treat!

[@DaveFoy]

It's great to be back! Can't wait to make more videos, got a big big list. :)

[@julio7410]

Glad to have you back! Specially for now being part of Bricks family!

[@DaveFoy]

Aww thanks. 😁

[@Kirolmh]

I would pay monthly subscription to learn from you. For sure one of the best tutors I've seen on KZbin.

[@DaveFoy]

I appreciate that. Thanks so much.

[@kevinroberts3789]

Awesome to see you back in free YT videos, the gateway drug to all the other training goodness you provide!

[@DaveFoy]

Ha haaaaa yes. 😉

[@TorJones]

Dave has been a big part of my website development success. I can't wait to watch your videos; keep 'em coming!

[@DaveFoy]

That's great to hear, Tor. Thanks so much. Can't wait to make more videos.

[@cnclassicmovie]

Your video is very helphul to me. Could you please made a short video that shares how to set up the "search" function in the bricks builder. Thanks a lot.

[@DaveFoy]

Noted. Thanks for the suggestion.

[@Horai-Web]

Thanks for your great video, very helpful !

[@SmailIsco]

3 years bro!!!

[@DaveFoy]

I know! It’s good to be back. :)

[@natcreat9145]

Better watch it: You’re liable to class up this joint! Welcome back to KZbin, my friend!

[@DaveFoy]

🙌

[@yesmubindid]

Thanks for covering Bricks!!!

[@DaveFoy]

No worries! I’m loving Bricks. More to come.

[@sidneyjohnson6895]

Dave, what a surprise in more ways than one!!! Remember the days (2016-17) from that other Page Builder, right! I see we've both graduated and migrated to Bricks. We've got to catch up - Great tutorial as usual.

[@DaveFoy]

I'm sorry, who is this? JOKE! Wow. It's been a while, right?? How the devil are you Sidney?!

[@grahamcheetham3043]

Welcome back to KZbin Dave. You’ve still got the gift. I am not a Blocks user but your content is always well done.

[@DaveFoy]

Nice. Thanks Graham. 🙏🏼

[@speakel]

Thanks Dave

[@DaveFoy]

No worries. 🙏

[@mayanikolova8353]

Great to see you back in full swing!

[@DaveFoy]

Great to hear from you too, Maya!

[@danstevens1974]

Hi Dave - excellent video. Had it open on screen two for a few hours today! For the mobile menu. Not sure you need a seperate close toggle. Just use the open toggle to close the menu also. This is probably expected by users in relation to UI. On the toggle you can change the animation - something like "spring". This then acts as an open and close for the mobile menu. Thanks again! Dan.

[@DaveFoy]

Good tip, Dan! Yes, I was just following the defaults set by Bricks, but I guess they're just showing how flexible you can be, if you needed separate open and close icons. Thanks man.

[@DaleBulbrook]

Nice one, Dave. Welcome back :)

[@DaveFoy]

Thanks so much, Dale. I appreciate that!

[@tortasELtommy]

Lets goooo! Yeah Dave is back. Looking forward to enjoy your videos

[@DaveFoy]

Yeeeaaaaaaaahhh!

[@kerawelt2008]

Delighted to have you back in good heath Dave !

[@isaurasotoca]

So glad to have you back here with this amazing Bricks content!! 😊 I am amazed of your video and editing quality! Such a joy to watch you!!! Welcome back, Dave!

[@DaveFoy]

Aww thank you so much! So good to be back. Yeah I've had a LOT of practice making 100s of videos while I've been away... just none of them on KZbin. :)

[@dynamic-homepages]

Thanks for creating the video 🎉🎉🎉. The Mobile Menu was one of my headaches, besides unwanted Error Logs 😂 👍👍👍

[@FastWebCreations]

Welcome back.

[@DaveFoy]

🙏

[@mikecharles6767]

Thank you David!

[@patrickkilian]

I am glad you're back. Could you please do a video from start to end of building a small website with Bricks? Please!

[@DaveFoy]

Not a bad idea, Patrick. I'll add it to the list. 👍

[@harrysastroshed]

excellent stuff and many thanks for excellent video keep up the good work

[@AndrewKwabula]

"Naked dancing in the streets? No, just me then" 😁😆😅

[@DaveFoy]

Glad someone found that funny 😁

[@MarioSarto]

I missed you - glad you are back! Hope you stay a while.

[@DaveFoy]

It's great to be back. Thanks man. 🙏

[@Sashad2003]

Very good tutorial. Thank you

[@DaveFoy]

Glad it was helpful.

[@christianmagill3829]

Much thanks! I feel much more informed. Looking forward to the mega menu and off-canvas videos!

[@DaveFoy]

You’re very welcome. Lots more Bricks videos coming.

[@johnpixle]

Awesome video, thanks so much!

[@DaveFoy]

Very welcome! Thanks for that.

[@James_m7]

Which is a better build: Bricks vs Breakdance - which has more features and is easier to use?

[@DaveFoy]

"Better" depends on your experience level and how you like to work. For Breakdance, think Elementor, but leaner/cleaner. It's much more for someone like an Elementor user who's used to having a lot done for them, but with a corresponding lack of global styling control. So in that sense, Breakdance is easier to use than Bricks. But "easier to use" does not necessarily make something the best. :)

[@mikecharles6767]

Mind boggling! Thank you for your tutorial! Mike

[@DaveFoy]

My pleasure!

[@morozara4962]

Great lesson

[@DaveFoy]

Thank you 🙏🏼

[@StraightForwardTravel]

This video continues to be of help to me thank you!

[@DaveFoy]

Great to know 🙌

[@AdrianBold]

Good to see you've come out of KZbin retirement, Dave. I've been forced into watching repeats of Last of the Summer Wine since you've been gone.

[@DaveFoy]

A terrible fate. It’s only right I make more videos then.

[@buntuscainte4987]

Great video Dave, great to see you back on KZbin👍

[@DaveFoy]

Me too! Thank you.

[@susanwheeler-hall]

Good to see you on any platform Dave - always deliver helpful material.

[@DaveFoy]

Lovely of you to say, Susan. 🙏

[@M173M]

Is there any way we can copy this whole component, for desktop and mobile menu? Can you upload it somewhere please

[@brianrougeau]

Thanks for this! Very clear and comprehensive.

[@DaveFoy]

Thanks Brian. 🙏

[@michaeltrull5788]

great video thank you

[@rexyyoyo4878]

Lovely! Awesome come back! Will be waiting for more of such amazing content. 😊

[@DaveFoy]

Thank you so much 😀

[@StraightForwardTravel]

Outstanding tutorial thank you very much and I hope you continue making such high quality tutorials.

[@c.p.841]

Welcome back!

[@DaveFoy]

Thank you!

[@ceescoenen]

Wow! Thank you Dave. Clear manual, love it

[@DaveFoy]

That makes me very happy. Thank you.

[@3pcgi959]

An fantastic tutorial THX👍

[@Michael_M]

Hey Dave, liked the presentation - great job! Any idea when you’ll create the videos about the mega menu and multilevel?

[@DaveFoy]

On my list, my friend. I’ll get there, promise.

[@LouiseJosephine]

Thanks! What a delightful tutor and video, you remind me of Dominic Monaghan 😅

[@DaveFoy]

Thank you! Had to look him up. I can't see it, but then my daughter is apparently the spitting image of me and I can't see that either, while the rest of the world can. :)

[@caveman3703]

Very good video, thanks

[@DaveFoy]

Glad you liked it.

[@nilsdannemann]

Thanks a lot 👍

[@NOALNOM]

Congrats Dave! Very impressive the improvements in your video edition, it looks amazing. And great tutorial BTW, thanks for sharing!

[@DaveFoy]

Glad you noticed! I’ve made 100s of videos in my courses while I’ve been away from KZbin, so I’ve had a lot of practice. :)

[@DaveFoy]

Free cheatsheet: davefoy.link/bricks-nav. My free 45 min Bricks masterclass: davefoy.link/bricks-masterclass

[@maayanzilberberg2523]

Can you please do a video on dynamic mega menu? Thanks

[@purplecowdigitalmarketing3412]

Thanks Dave! Love this!!

[@DaveFoy]

❤️❤️❤️

[@derekshort]

Dave, this video is excellent! 😃🙌🏻🙏🏻

[@DaveFoy]

Thanks so much Derek! If I recall you’re fairly new to Bricks?

[@derekshort]

@@DaveFoy Yes. 😊 It's been difficult to find excellent tutorials. Most people don't zoom in or they use the distractive corner bubble of them talking. I look forward to watching your other videos.

[@DaveFoy]

I can’t ever figure out why anyone would want to see the guy in the corner. I always assume what’s going on onscreen is far more important!

[@derekshort]

@@DaveFoy Exactly! It's like having 2 CTAs. 🤦🏻

[@clarebrody1]

Awesome tutorial, so glad I found your vidoes. Question if you want the close button top right you'd need to use the off canvas function instead? I couldn't get it to work with the one shown in this video. Whats your opinion on Breakdance, i find it so much easier, do you think its worth the extra money than Bricks? Cheers

[@DaveFoy]

Thanks Clare. Glad you like! To put the close button top right you could set the element to be position absolute and then set it to the exact co-ordinates you want. I haven't had chance to test tho. I see Breakdance as more like Elementor and Bricks being more like Oxygen (though it's definitely NOT a direct match). Breakdance probably easier but with less real control.

[@clarebrody1]

@DesignBuildWeb thank you, I'll see if I can do that. Yep I just realized playing more with breakdance that I fully understood what the difference was between a page builder and say bricks or kadence they are more integrated with Gutenberg so never full reliant on the page builder. I noticed breakdance doesn't have option to highlight text on hover which is interesting.

[@philippepperell9951]

Great tutorial, Dave. I do have one issue, though. As you suggested, I included my menu hover settings on the Nav (nestable) but I also included a button within the menu. The styling on the button is from my theme styles and so perhaps not surprisingly it's the menu hover styling that shows when I hover over the button and this just doesn't work with my other button styling. I tried resetting the button hover styling on the menu button within the menu but this has no effect. Is this a bug or just one of the cases you mentioned in the video where it will be necessary to set the styling on the individual Nav links rather than the Nav (nestable)? I haven't tried it yet but I presume this would work:

[@filmgenius2]

Does Nav links automatically have HTML tag of “li”

[@DaveFoy]

Yes they do. And they're all wrapped in a UL and nav element.

[@mrfairycake4333]

Bang'n dave ;)

[@mini-man]

thumps up - and comment ... yeah : D

[@DaveFoy]

😁

[@DavidMurrin77]

I'm trying to work out how to change the hover for the CTA button thats inside the menu. I set the menu hover colour to orange (for example) but my button is orange, so when you hover, it has orange on orange - I have styled the hover for buttons to white text, as well as trying to target that button in the builder to white. In the builder it looks fine though live, it hovers orange again. Is there a way to make this work (unless it's requiring custom CSS)

[@DaveFoy]

If it’s ok in the builder, I wonder if caching is the issue? Any caching plugins installed? Caching in place on the server? Also try checking out live in a different browser.

[@moon_kill_sun]

The Nav menu in Bricks is awesome, but I'd be careful calling it "It's the most powerful and flexible nav menu builder you'll find in any page builder". Just take a look at Cwicly: kzbin.info/www/bejne/lWbZaZabebSibdk

[@DaveFoy]

Ah yeah, true. I have a mind block with Cwicly tho cos the UI is painful.

[@moon_kill_sun]

@@DaveFoy At the beginning, the UI is really overwhelming, but with experience, its meaning is discovered (there are definitely still some things to fix/improve). Your lessons are really great. Thanks a lot!

[@DaveFoy]

I’m always open minded. I’ll check it out again. And thanks!

[@Mittke88]

Oh welp, I will have to move from elementor to Bricks. Elementor support has to be the worst one.

[@DaveFoy]

You'll be very welcome in the Bricks community!

[@xhwsdm]

your video is way too looooong! please make it shorter and more concise

[@DaveFoy]

Oops too late.

[@kwsim539]

"I'll be back to you with your PDF very shortly"? OK. Then I will be back shortly to finally watch the rest of your video, and maybe change my Dislike to a Like afterward.

[@DaveFoy]

You gave the video a thumbs down cos of a slight delay with the PDF? Tough justice.

[@kwsim539]

@@DaveFoy Yeah! Your video leads with an offer you don't provide, and then you try to upsell me on something else. In my country, this is called a Bait & Switch, which is illegal and considered false advertising.

[@DaveFoy]

Well, please accept my apologies for the short delay. I had an unexpected family emergency to attend to. I've just sent you the PDF. Thanks for your interest.

[@kwsim539]

@@DaveFoy Please accept my apologies for snapping at you. Too many times have I run across these types of click-bait type emails. Where they promise you one thing and try to sell you something else in its place. So, when I saw your email fashioned in the same way it, as you may say where you are, got my knickers in a bunch. Thank you for getting around to sending out the PDF mentioned in the video and thank you for being part of and helping others in the Bricks community

[@DaveFoy]

No problem at all. Totally understandable.

[@davidson7838]

Hello Dave, what's the news of Brizy Pro? we bought life time licence and there is no good news while other builders are growing rapidly. 🥲 Is the company behind Brizy is still developing brizy for WordPress? I know you are not the owner but you are very closely involved in making videos abot it's features.

[@DaveFoy]

You’re mistaking me for someone else.

[@davidson7838]

@@DaveFoy sorry Dave, you are right, I am wrong, his name is JP not Dave 😂

[@DaveFoy]

Easy mistake, very similar. 😆