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 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.

Video Version

I created a short video to walkthrough the process:

Overview of the Steps

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.

Go to the Astra Website

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 same 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.”

Similar Posts