Creating an Off-Canvas Menu for Astra

Creating an Off-Canvas Menu for Astra

As you may know, Astra is a relatively new WordPress theme created by Brainstorm Force. They are the company behind the Ultimate Addon for Beaver Builder as well as a number of other plugins. Upon acceptance, the Astra theme quickly shot up into the most popular theme category on WordPress.org and has become the go-to theme for many designers and agencies. There is a pro version of the theme which has been receiving regular feature updates, both as part of its public roadmap and in response to the user requests. For example, they extended the blog and site layouts in November and released WooCommerce integration in January. The Facebook user community is very active and I've noticed requests for more menu options, a feature on the roadmap. Meanwhile, I wanted to have an off-canvas menu for a site I'm working on and noticed that the Ultimate Addon for Beaver Builder included an off-canvas option. That got me wondering if it was possible to add an off-canvas menu for Astra now using the tools already available. It turned out to be surprisingly easy.

I created a short video to walkthrough the process:

 

The basic steps are these:

  • Make sure you have the menu you want to use already created.
  • Create a global Beaver Builder module using the advanced menu from Ultimate Addons. To do this, I created a test post, added a row and the advanced menu module, and adjusted the settings for the off-canvas option. Once you have adjusted the settings, be sure to save it as a global module, using the "Save As" option and remember the name you give it. Save the post.
  • Go into the Customizer and set the menu options in the Header section to "None" and choose to add a header widget.
  • Go into the widgets management area, select the text widget for the header section, and add the Beaver Builder shortcode for modules. In my case this was [fl_builder_insert_layout slug="mymenu"].
  • You should now have a functional off-canvas menu and can delete the test post.

One thing I noticed during the process is that the color options are being picked up from the Astra theme and not the module. I think this is because the menu is being placed in the theme header.

The Astra theme is very page builder friendly, lightweight, and flexible. There is currently a lifetime option available for the pro version, both as a standalone theme and as part of a larger Agency package that includes a number of premium plugins.

Affiliate Disclosure: Some of the links in the post above are "affiliate links." This means if you click on the link and purchase the item, I will receive an affiliate commission. You will still pay the standard amount so there is no extra cost to you. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: "Guides Concerning the Use of Endorsements and Testimonials in Advertising."

Close Menu
>

Newsletter Sign Up

Receive occasional emails from WebTNG with reviews, how-tos, editorials and news about themes and plugins with a lifetime license. 


Your email address will not be shared.

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp's privacy practices here.

Pin It on Pinterest

Share This