In this Bricks tutorial, I’ll show you a custom mobile menu system I built. I created this because I feel the native mobile menu system in Bricks doesn’t give you full control on mobile devices.
With this new system, you’ll have complete control over your mobile menu, including smoother scrolling behavior and the ability to add extra elements inside the mobile menu without issues.
Timestamps:
- 0:00 Intro / Demo
- 1:23 Header Structure Layout
- 3:18 Offcanvas Settings
- 6:20 CSS Code
- 11:42 Offcanvas Backdrop
- 13:36 Menu Toggle Button
CSS Code
%root% {
margin-top:100px;
max-height: calc(100dvh - 100px);
overflow-y: auto;
height:auto;
}
body.no-scroll {
position: fixed;
}
