Fully Responsive Bricks Builder Mega Menu Tutorial

[@nickarceco]

Announcement and quicklook at the end of the video. 😉

[@eLeieZer]

Such an amazing tutorial. The quality of the content is overwhelming! I will definitely try this at some point.

[@9999chippy]

Thanks for this, obviously many hours of work creating this. You are a great advocate for Bricks

[@christucker6832]

Excellent. Keep up the grind and put out some more functional templates like the Mega Menu. Amazing Template!

[@dahunsi]

Awesome video Nicolas. I need to watch it a few more times, but it is soaked in value. I look forward to the template. Well done and thank you.

[@nickarceco]

yes this will take many watches!

[@JenniferSaenz]

LOVE the walkthrough at the beginning; it is so helpful to establish a basis for reference. I hate mega menus and avoid them, but I am happy to have this as a reference. It's great to see the troubleshooting along the way and hear the thought process. Quality content that doesn't waste time, thank you!

[@nickarceco]

I hate them too to be honest. I have a client that has a similar mega menu that I needed to build so I said “why not a tutorial!”.

[@BGdev305]

I actually liked the nav items sliding over and out when reaching the mobile breakpoint

[@AAABBB-px2ci]

Thanks for the tutorial. It really helped me. Without your help I would not have got my desired menu. Also finally a tutorial that goes into detail and not just surface the standard functions. Have learned so many new things

[@nickarceco]

Would love to take a look if you have a link! Glad I was able to help you with your desired outcome!

[@jamorahcito]

you are a monster... acss, bricks, sass. wow. you just let me know that sass and css is all I really need to work on to get to the next level. Thanks a million.

[@nickarceco]

Haha thank you! It’s amazing how much css can do for you once you have a better understanding of it.

[@Kh4N]

YAY, there it is! Another great tutorial! Thx, Nicholas 🤗

[@mio...]

The least amount of typos in writing code out of all tutorials I have ever watched :) Thanks for the great tutorial, I find it really useful and applicable to my case particularly.

[@nickarceco]

Would you be mad at me if I said it was editing magic 🫢 I made soooo many typos but tried to hide them.

[@mio...]

@@nickarceco No, not at all! That only proofs how much effort you invest in making the video. Thaks for that, too!

[@nikoweb]

This is awesome. These in-depth tutorials are superiors.

[@deehrk]

hands down best tutorial for bricks mega menu. ace it !

[@nickarceco]

Thank you!

[@starmap]

Great menu! I will get it if i find a use for it.

[@jerrycompanjen5325]

Appreciate these videos a lot, very refreshing and new content in the bricks builder space with so many useful tips! Love these day to day by use case videos ❤️

[@nickarceco]

Thank you so much! I’m glad you like them!

[@interculturalcommunication3889]

Man, I can't wait to get to this one. But at 1 hour and 36 minutes of intense education is going to have to wait until this weekend. Can you drop your videos on Fridays for me? Just kiddin'! Thanks for the help Nick!

[@nickarceco]

I would if there was many people online on fridays. Yes I can see that data apparently. Thanks google for tracking EVERYTHING

[@interculturalcommunication3889]

@@nickarceco , yeah, you gotta drop when the algo tells you to. I'll get to it when I can!

[@zensukai]

Fantastic work, well done! Thanks for such a great tutorial.

[@nickarceco]

Glad it was helpful!

[@benjaminjoksch6626]

As I said in the ic - thank you so much for this 🤘

[@nickarceco]

My pleasure!!

[@cosminrus6571]

What I would like to have from this video is the project setup, I mean the whole wp starter with all the plugins, bricks setup and everything

[@digwillhachi]

absolute gold. I havent even tried the Bricks mega menu yet but i assume natively its very limited if you need to customize to this extent?

[@nickarceco]

It may not be. I honestly gave up on even attempting to use the bricks mega menu panels in the builder so it could honestly offer a way to do this but I just decided to do it all in SASS cause I find it easier. Mega menus are very tricky. No one has found a good way of doing it. Maybe breakdance but even breakdance locks you into a certain way of doing it so it’s definitely complicated.

I have rebuilt you menu following your amazing tutorial. Everything works as intended.Would you have an idea to place the customer logo inside the mobile-nav as well? Will try it myserlf. But guess you would no right away... :D

[@nickarceco]

Im not 100% certain. You could try adding a logo into the top nav piece of your mobile menu and separating the back and close button from the logo. you will have to redo the calculations for how to place the back button if it has a logo above it if that makes sense.

[@luke-holmes]

This is an amazing tutorial Nick - thanks! Any idea on the timeframe of your template? Can't wait!

[@nickarceco]

I’ve got some people testing it and giving me feedback. Im working on my website now so I’m hoping very soon! Still lots of little problems to solve.

[@giota3800]

Hi Nicholas. Thanks for the advance tutorial. At 1:09:45 you set as a direct child of ul a div. I think only li should be direct child of a ul. Thanks

[@nickarceco]

You are right. That would be improper html. The left side of the mega menu needed to be a UL with the nav items inside it. Good catch thank you

[@bluefuzecom]

quick question... how are you able to pull in Unsplash images into the Bricks images like that?

[@nickarceco]

Bricks has an option to connect to Unsplash api. You’ll find the settings under bricks settings > api

[@maayanzi30]

is there a way of making the navbar including the mega menu to be dynamic?

[@nickarceco]

I’m assuming you mean to pull in a Wordpress menu. At the time being that’s not possible without creating custom query loops and that will require quite a bit of work

[@maayanzi30]

@@nickarceco am not afraid of work and queries. Trying to achieve it but it didnt take the relevant queries. Doing it in bricks builder

[@nickarceco]

Well it will require coding out custom queries. I couldn’t quite guide you as I haven’t done it myself

[@klokkerholm1993]

What did you u use for screenreader 😊?

[@nickarceco]

I am using the default screen reader on the mac

[@BryanDevsCoding]

Good stuff

[@sorinciprian7579]

When I paste the .json file its not working. Did I miss anything?

[@nickarceco]

It’s usually the browser stopping the paste. Use chrome browser and if that doesn’t work try an incognito window. It will typically ask for approval to paste.

[@yesmubindid]

Letttttttttsssss go!!!

[@timtopclub967]

from mobile wide change to pc, you will find the dropdown content Shifted