How to Use The Bricks Builder Nav Menu: Beginner's Guide
HTML-код
- Опубликовано: 5 июл 2023
- 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/bricks-nav
FREE BRICKS MASTERCLASS:
davefoy.link/bricks-masterclass
LEARN BRICKS BUILDER STEP-BY-STEP:
davefoy.link/bricks-course
Video: is the OLD nav menu builder better in some situations?
• Bricks Builder Nav Men...
Bricks menu builder docs:
academy.bricksbuilder.io/arti...
Thanks so much for making the PDF tutorial! Much faster than following a video. I wish everyone did that.
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.
This is possibly the best tutorial I've ever seen on anything. Just signed up for you class.
I don't think comments get better than this, Eric! Thank you so much.
@@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!
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!
I love your shirt! Great tutorial man, keep it up 🤙
First person to notice. :)
@@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.
So good to have you back and especially doing Bricks content. Honestly, a real treat!
It's great to be back! Can't wait to make more videos, got a big big list. :)
Delighted to have you back in good heath Dave !
Great to see you back on RUclips 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.
Huge thanks Helen. Always a pleasure.
3 years bro!!!
I know! It’s good to be back. :)
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
Great to see you back in full swing!
Great to hear from you too, Maya!
I would pay monthly subscription to learn from you. For sure one of the best tutors I've seen on RUclips.
I appreciate that. Thanks so much.
Better watch it: You’re liable to class up this joint! Welcome back to RUclips, my friend!
🙌
Thanks for covering Bricks!!!
No worries! I’m loving Bricks. More to come.
One of the best teacher i had and have for my adventure in web dev world Thank you
I took the unusual path: Coming from your course and now learning, you also do youtube videos! 😂 Great to see you here, also 🎉
No harm in doing things backwards, Ulf! It's nice to be unconventional.
Nice to see you back on RUclips. 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.
Hey Gaelyne. Yeah this is a great idea. It's on my list!
Lets goooo! Yeah Dave is back. Looking forward to enjoy your videos
Yeeeaaaaaaaahhh!
Nice one, Dave. Welcome back :)
Thanks so much, Dale. I appreciate that!
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.
Wait... Were you thinking you'd get away with free Bricks tuts on YT without telling me?? Busted Foy! Thou shall be followed closely! 🤪
Guilty! 😂
Glad to have you back! Specially for now being part of Bricks family!
Aww thanks. 😁
Awesome to see you back in free YT videos, the gateway drug to all the other training goodness you provide!
Ha haaaaa yes. 😉
Outstanding tutorial thank you very much and I hope you continue making such high quality tutorials.
Dave has been a big part of my website development success. I can't wait to watch your videos; keep 'em coming!
That's great to hear, Tor. Thanks so much. Can't wait to make more videos.
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.
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!
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 RUclips. :)
Good to see you on any platform Dave - always deliver helpful material.
Lovely of you to say, Susan. 🙏
Welcome back to RUclips Dave. You’ve still got the gift. I am not a Blocks user but your content is always well done.
Nice. Thanks Graham. 🙏🏼
This video continues to be of help to me thank you!
Great to know 🙌
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 😂
First time someone’s told me I’ve got British arms, but I’ll take it. 😂
Haha the tan line from our (barely) British summer, just warm enough for T-shirts so far
@@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?!?)
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!
This is a brilliant point, Craig, and yeah, one I skipped over here in rushing ahead. 🤦🏼♂️ Thanks!
@@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.
Lovely! Awesome come back! Will be waiting for more of such amazing content. 😊
Thank you so much 😀
Welcome back.
🙏
Thanks for your great video, very helpful !
Congrats Dave! Very impressive the improvements in your video edition, it looks amazing. And great tutorial BTW, thanks for sharing!
Glad you noticed! I’ve made 100s of videos in my courses while I’ve been away from RUclips, so I’ve had a lot of practice. :)
Great video Dave, great to see you back on RUclips👍
Me too! Thank you.
excellent stuff and many thanks for excellent video keep up the good work
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.
I'm sorry, who is this?
JOKE!
Wow. It's been a while, right?? How the devil are you Sidney?!
Thanks for this! Very clear and comprehensive.
Thanks Brian. 🙏
I missed you - glad you are back! Hope you stay a while.
It's great to be back. Thanks man. 🙏
Wow! Thank you Dave. Clear manual, love it
That makes me very happy. Thank you.
Thanks for creating the video 🎉🎉🎉. The Mobile Menu was one of my headaches, besides unwanted Error Logs 😂
👍👍👍
Thanks a lot 👍
Much thanks! I feel much more informed. Looking forward to the mega menu and off-canvas videos!
You’re very welcome. Lots more Bricks videos coming.
great video thank you
Thanks Dave! Love this!!
❤️❤️❤️
Thanks! What a delightful tutor and video, you remind me of Dominic Monaghan 😅
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. :)
Very good tutorial. Thank you
Glad it was helpful.
Great lesson
Thank you 🙏🏼
Very good video, thanks
Glad you liked it.
Thanks Dave
No worries. 🙏
Awesome video, thanks so much!
Very welcome! Thanks for that.
I am glad you're back. Could you please do a video from start to end of building a small website with Bricks? Please!
Not a bad idea, Patrick. I'll add it to the list. 👍
Welcome back!
Thank you!
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.
Noted. Thanks for the suggestion.
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.
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.
Dave, this video is excellent! 😃🙌🏻🙏🏻
Thanks so much Derek! If I recall you’re fairly new to Bricks?
@@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.
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!
@@DaveFoy Exactly! It's like having 2 CTAs. 🤦🏻
Hey Dave, liked the presentation - great job!
Any idea when you’ll create the videos about the mega menu and multilevel?
On my list, my friend. I’ll get there, promise.
"Naked dancing in the streets? No, just me then" 😁😆😅
Glad someone found that funny 😁
Good to see you've come out of RUclips retirement, Dave. I've been forced into watching repeats of Last of the Summer Wine since you've been gone.
A terrible fate. It’s only right I make more videos then.
Free cheatsheet: davefoy.link/bricks-nav.
My free 45 min Bricks masterclass: davefoy.link/bricks-masterclass
Can you please do a video on dynamic mega menu? Thanks
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
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.
@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.
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:
Which is a better build: Bricks vs Breakdance - which has more features and is easier to use?
"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. :)
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)
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.
Bang'n dave ;)
Does Nav links automatically have HTML tag of “li”
Yes they do. And they're all wrapped in a UL and nav element.
thumps up - and comment ... yeah : D
😁
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: ruclips.net/video/_5v8ceDOo7w/видео.html
Ah yeah, true. I have a mind block with Cwicly tho cos the UI is painful.
@@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!
I’m always open minded. I’ll check it out again. And thanks!
your video is way too looooong! please make it shorter and more concise
Oops too late.
"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.
You gave the video a thumbs down cos of a slight delay with the PDF? Tough justice.
@@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.
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.
@@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
No problem at all. Totally understandable.
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.
You’re mistaking me for someone else.
@@DaveFoy sorry Dave, you are right, I am wrong, his name is JP not Dave 😂
Easy mistake, very similar. 😆