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