Intro: In this post, we are going to show you how to make a button that toggles off canvas element in Bricks Builder using Max Addons. This step-by-step guide is beginner-friendly and will help you enhance your website’s navigation with ease.
Have you ever wanted to create a hidden side panel, a mobile menu, or a pop-out notification in Bricks Builder? That’s where an off-canvas element comes in handy!
An off canvas element is a hidden section that slides into view when triggered—perfect for menus, sidebars, or a fancy promotional pop-up.
The good news? You don’t need complex coding to achieve this in Bricks Builder using the Max Addons Off Canvas element. With just a few tweaks, you can set up a button that smoothly toggles your off canvas section.
So, let’s dive in! 🚀
Why Use an Off Canvas Menu?
An off canvas menu is a great way to improve your website’s navigation while keeping the design clean and user-friendly. Instead of displaying a menu all the time, you can hide it in an off canvas panel that appears when a button is clicked.
Make a Button That Toggles Off Canvas Element in Bricks Builder Using Max Addons
Step 1: Install and Activate Bricks Builder and Max Addons
Before we proceed, make sure you have Bricks Builder and Max Addons installed on your WordPress website.
Step 2: Create a Header Template
Next, we need to create a header template.
To do that, navigate to your WordPress dashboard and click Bricks >> Templates.
Next, click on Add New Template, give your template a name, and select Header as the template type. Once you’ve set this up, click Publish and select EDIT WITH BRICKS to start designing your header.
Step 3: Customize Your Header
Inside the Bricks editor, start by adding your preferred elements, such as Logo or Navigation Links, to your header. You can even customize the background color to match your website’s theme.
Step 4: Add the Off Canvas Element
Now, search for the Off Canvas element in the Bricks Builder elements panel. Once the element appears, click on it to add the element to your page.
Don’t forget to check the “MAX” tag on the element’s icon, which confirms that it’s part of Max Addons.
Step 5: Configure Off Canvas Content
Once the element is added, its settings will appear in the left panel.
In the Content tab, the first option, you’ll see an option called Off Canvas Content. This lets you choose what content will be displayed in the off canvas menu.
You can choose from a Website Menu, Pre-Designed Templates, or Custom Content.
For our tutorial, we will select the Menu option, so your website’s navigation menu appears when the off-canvas panel is triggered.
Step 6: Choose a Trigger Option
Triggers determine how the off canvas menu will open. The available options include Button, Icon, Element Class, and Element ID.
Since we’re focusing on making a button that toggles the off canvas menu, select the Button option.
Step 7: Customize the Button
Once the button trigger is selected, you’ll see multiple customization options.
You can change the Button Text to something like “Menu” or “Open Panel”. You can also choose an Icon to make it more visually appealing.
Additionally, there are different button styles, such as Primary, Secondary, Dark, and Muted.
You can tweak other design aspects like an outline, border, box shadow, typography, background color, and padding to match your website’s design.
Step 8: Configure Label Options (Optional)
You can even customize the appearance of the menu labels by adjusting the typography, background, margins, and more.
If you prefer a minimalist look, you can Disable Labels.
Step 9: Adjust Off Canvas Behavior
In the SETTINGS tab, you’ll find several options to control how the menu behaves. You can choose the direction the menu slides in from (left, right, top, or bottom).
Further, you can select a transition effect to make the appearance smoother. For a better user experience, enable options like Close on ESC Key and Close on Overlay Click so users can exit the menu easily.
Step 10: Style the Off Canvas Panel
To make the menu visually appealing, navigate to the OFF CANVAS STYLE options. Here, you can adjust the panel’s size, add padding for spacing, and choose a background color or image.
Step 11: Customize Off Canvas Content
To style the off canvas content, navigate to the CONTENT STYLE tab. Here, you can adjust the padding around the content inside the panel, set the alignment of text and other elements, customize font styles, sizes, and colors, define border styles, thickness, and more.
Step 12: Customize the Close Button
CLOSE BUTTON options allow users to exit the off-canvas panel. You can choose an icon that fits your design and adjust its size, color, and placement.
Wrapping Up!
Great! You’ve successfully created a button that toggles an off canvas menu in Bricks Builder using Max Addons. This feature not only enhances your website’s functionality but also provides a user-friendly navigation experience.
If you find this tutorial helpful, you may also be interested in learning how you can create a Read More / Read Less toggle in Bricks Builder.
Max Addons is a powerful addon for Bricks Builder, packed with 50+ creative elements to help you easily build any website. From personal blogs to professional business sites, you’ll find the elements to match your site style and needs. So what are you waiting for? Get Max Addons for Bricks Builder today!
What do you think about this tutorial? We’d love to hear from you—drop a comment below!
