Fully Responsive Bricks Builder Mega Menu Tutorial
Want to cheat and skip ahead? The mega menu template has launched: https://nickarce.com/products/mega-me...
Our standard Bricks mega menu might leave you wanting more when it comes to the mobile user experience. That's where I come in. After an exhaustive week of relentless testing, tweaking, and perfecting, I've discovered an exceptional responsive solution.
Now, there's no need for you to tread the same ground. I've distilled my week-long exploration into a few concise and insightful hour and a half for you. This step-by-step guide will enable you to replicate this mobile friendly method.
Stay tuned, as a user-friendly template based on this solution is in the pipeline.
Clickable--parent snippet link:
https://snippet.codes/u/sleeplesskxng...
Tools Used:
WPCodeBox (affiliate)
https://wpcodebox.com/?ref=249&campai...
__________________________________________________
Socials:
/ nickarceco
Buy Me a Coffee:
https://www.buymeacoffee.com/nickarce
Chapters:
00:00 - Intro
00:46 - Planning Out Our Build
03:00 - Building Mobile Layout in Bricks
06:10 - Setting Breakpoint CSS
08:22 - Mobile Menu Open CSS
12:35 - Adding Slide In Animation
16:31 - Mobile Mega Menu Content Slide Over
24:44 - Mobile Top Nav Styling
32:13 - Mobile Close and Back Button Calculations
35:45 - Completing Top Mobile Nav
36:45 - ALERT: Special change to Icon Size Calc
40:00 - Bottom Portion of Mobile Nav
45:53 - Removing Overflow on Mobile Mega Menu Content
47:41 - Removing Scrollbar On Mobile Mega Menu Content
50:18 - IMPORTANT: Fixing Bricks Calculations for Mega Menu
52:56 - Button and Dropdown Accessibility
55:28 - Styling Everything for My Use Case
56:48 - Turning Last Nav Link to Button
01:00:09 - Mobile Last Link Button
01:03:14 - Setting Mega Menu Dropdown Width
01:04:05 - Styling Mega Menu Dropdown
01:05:52 - Fade Up Desktop Mega Menu Effect
01:09:17 - Adding Our Content
01:13:19 - Styling Menu Content For Desktop
01:31:21 - Styling Mobile Mega Menu Content
01:33:33 - Wrapping Up
01:35:46 - Outro + Announcement
On this page of the site you can watch the video online Fully Responsive Bricks Builder Mega Menu Tutorial with a duration of hours minute second in good quality, which was uploaded by the user Nick Arce 27 June 2023, share the link with friends and acquaintances, this video has already been watched 10,588 times on youtube and it was liked by 276 viewers. Enjoy your viewing!
