Better mobile menu in Bricks Builder | opens below header | closes on click | WordPress Tutorial

In this video you'll learn how to set up a mobile menu that is simple yet effective and accessible by making the mobile menu open below the header, it also closes when a menu item is clicked.

GET ACCESS TO MY ADVANCED & INDEPTH TUTORIALS

GET AUTOMATIC.CSS - A time saving utility class for WordPress websites

Time Stamp
00:00 - Intro
00:25 - The problem
02:24 - Kevin's Inner Circle Announcement!!!
03:40 - Set up Header template
10:55 - Set up Navigation
13:00 - Menu CSS
20:17 - Menu JavaScript

Bricks Builder | WordPress | Tutorial
#wordpress #bricksbuilder #bricks

--------------------------------------------------------------

GET MOTION.PAGE - Interact & animate any WordPress site

--------------------------------------------------------------
GET RECODA WORKSPACE - Advance workspace for Oxygen Builder

--------------------------------------------------------------

GET YABE WEBFONT - Custom fonts management and self-host Google Fonts with seamless WordPress page builders integration

--------------------------------------------------------------
Get Breakdance - A record breaking visual builder for WordPress

--------------------------------------------------------------
GET 20% OFF HOSTING PLAN FROM HOSTINGER

DISCLAIMER: This video or description contains affiliate links, which means that if you click on one of the product links, you'll be supporting the channel, and I’ll receive a small commission.
=============================================

BOOK A 1-HOUR CONSULATION
=============================================

=============================================

[mightylotan]

Honestly, hope Bricks sees this and integrates these features. Very smart.

[wppagebuilders]

Wow, this tutorial dives deep into customizing the mobile menu using Bricks! It's impressive how detailed and thorough the instructor is in explaining each step, from setting up the header template to tweaking CSS variables for responsiveness. The use of automatic CSS and the rationale behind changing the logo implementation for better mobile usability are particularly insightful. The JavaScript integration to enhance user interaction by ensuring the menu closes smoothly on click adds a professional touch. Overall, this tutorial not only teaches how to implement a practical solution but also emphasizes the importance of user experience in web design. Great job!

[SeanClarke]

Congratulations on becoming a teacher in the inner circle.

[paulhildmann]

Congratulations on your inclusion with Kevin Geary's Group! Your tutorials are always clear and understandable.

[webdesign-lokeren]

Very nice. On thing that I added is "position: fixed;" to the body.no-scroll class to fix the page scrolling in the small area above the mobile menu.

[webshoreeu]

Glad you joined the inner circle!!! After all, the "unofficial" circle of great tutors around Bricks / Oxygen is not as big as it seems at first glance...so I'm looking forward to more great videos from you and this new collaboration! Thanks to you and Kevin, my skills have improved enormously :)

[LudovicCharlier]

Wow thank you very much. Happy to see you in the Inner Circle :)

[chrisparky]

Great Stuff !!! And congrats on the Inner Circle. Look forward to watching you on there.

[emadhosen]

Thank you very much for this another awesome tutorial.

[MRJMXHD]

Such a detailed and simple guide! Thank you.

[JRGWxRxZ]

Great video, a little bit tricky for myself, but very instructive. Glad you joint Kevin Geary, you have the right instructor speech pace, i'll probably join next month and use your affiliate link, cause you deserve it. It will be good, if you could reach the same agreement with Breakdance, to be a seasonal instructor, cause they lack desperately informative in-depth tutorial.

[kakenetit]

Thank you for another excellent tutorial, and congrats on your endeavor with Mr. Geary!

[WildTraderAppeared]

superb ! so many interesting features !

[hamburger--fries]

Great job!!!! I am working on this exact topic.

[KhN]

great tutorial! Happy that you are also in the inner circle and giving more in depth tuts! 😊

[chelofonte]

GREAT, GREAT tutorial Craka. Could you please confirm if there is a method to display the CTA header button on the mobile menu?

[tootinghorns]

Great video as usual!
The following CSS placed on the Nav Menu also has the effect of keeping the menu clear of the Nav container on mobile (courtesy of Thomas @ Bricks)

root >
position: absolute;
top: 100%;
}

[Nima-Norouzi]

As usual excellent 👌👌👌
I didn't have enough time to watch it all, but please make another tutorial on how to use the new mobile menu builder and also the desctop. I'm looking to see the best way to make the menu for more complex woo websites where we have product categories alongside the main menu and also mini cart and those stuffs.
I'm waiting for these things for a long time ...

[KubaSobecki]

Good video and I love Bricks, however this would be done faster in plain code 😉

[mandrael]

Please more content with the new CORE Framework :D