To access the templates in Bricks, navigate to the WordPress dashboard and select “Bricks” from the menu. From there, you can easily find the option to explore and manage your templates.

Next, click on the “Add New Template” button to create a new template in Bricks. Provide a descriptive name for the template and choose the “Header” option as the template type. Once you have made your selections, hit the “Publish” button. You can then proceed to edit the template using “EDIT WITH BRICKS“.

Within the Bricks editor, you can enhance your template by adding a section and container. To make it visually appealing, customize the background color of the section or container to your liking.

To further personalize your template, incorporate your logo into the design. Place your logo in a suitable location within the editor. For a visually balanced layout, ensure that the toggle button remains horizontally aligned with your logo.

At this point, you have the flexibility to modify the toggle icon, color, and size according to your preferences.

After the parent block of your logo and toggle, you can seamlessly incorporate your Offcanvas element.

To proceed, navigate to the Structure panel and select the Offcanvas option. Click on it to access the left side content bar, where you will find your Offcanvas Element ID. Copy this ID.

Now, take the Element ID that you copied earlier and paste it into the CSS selector field within the Toggle settings. This will establish the necessary connection between the Toggle and the Offcanvas Element. Refer to the accompanying picture for a visual representation.

Our Offcanvas menu is now fully functional. Feel free to customize the content of your Offcanvas menu according to your preferences. In this case, since we are building a full-width Offcanvas menu, we can set the width and height to 100% to ensure it occupies the entire available space. Enjoy the flexibility and creativity in designing your Offcanvas menu.

Moving to the “Content” section, you can add a touch of style to your Offcanvas menu by assigning it a background color. Simply choose the desired color to enhance the visual appeal of your menu.

In this step, we will incorporate our logo into the Offcanvas menu and ensure that the Toggle (Close) button remains horizontally aligned with it. This arrangement will maintain a visually balanced and cohesive design.

Personalize your Toggle (Close) icon by selecting a different icon style. Additionally, you have the flexibility to modify the color and font size of the icon to match your preferences.

To populate your Offcanvas menu, simply add menu items using the “Text Link” option. This allows you to include various links and text within your menu, providing easy navigation for your users.

Our Offcanvas menu is now complete and fully functional. With all the necessary elements and customization in place, we have successfully created an Offcanvas menu that is ready to be utilized.

Enjoy the seamless and intuitive navigation experience it provides to your website visitors.