Astra

Before starting with the Astra and QuadMenu integration, you have to know that our mega menu plugin needs “menu locations” to works properly.

The pages where the menu have been built with Elementor or Beaver Builder doesn’t have a menu location making it impossible for our plugin to be activated on that location.

For this reason, if you follow the steps in this tutorial you’ll notice that the menus included with this pages builders will not be affected.

If this is your case you’ll have to follow the instructions to include a QuadMenu module:

• Elementor 
• Beaver Builder

Astra Mega Menu

Integrate Astra and QuadMenu it’s incredibly easy as we’ve developed a plugin that makes all the necessary changes.

1. In the WP dashboard go to Plugins > Add New.
2. Click on the Search Plugins field and search for “quadmenu”
3. Click the Install Now button and then Activate in the Astra Mega Menu plugin
4. Click the Install Now button and then Activate in the WordPress Mega Menu plugin

After activating the QuadMenu you’ll be redirected to the options page where you’ll see all the menu locations available in Astra. Make sure the integration button is On and the theme Astra Light is selected.

Creating Mega Menu

1. Navigate to Appearances > Menus on your WordPress dashboard
2. Create a new menu
3. Select the primary locations

After activating your menu location in the QuadMenu options, you’ll see a new metabox in your admin menu pages. This metabox is called QuadMenu Items, and here you’ll find all menu elements.

If you expand this tab, you will see the advanced elements: Icon, Mega, Tabs, Search, Login, and Cart.

In our example, we’ve included a mega menu with three columns and some pages and widgets in each column.

Feel free to add any other item you desire, like pages, custom links, post archives, categories, etc.

Customize Menu Theme

After creating some items we will customize our mega menu colors. If you’re running the free version of QuadMenu you have to go to QuadMenu > Options > Astra Light.

On this screen, you can customize your theme menu extensively and change for example the background, item links, dropdown colors etc.

QuadMenu Customizer

If you are running the premium version of QuadMenu, we must stand out the integration with the WordPress live customizer.

This is an important feature if you will include this plugin in your themes project, as this allows you and your end users to tweak all menu color scheme or layout settings and see the effect of that changes in real time.

To access the live customizer you have to purchase the premium version of QuadMenu and then go to QuadMenu Pro > Customize.