Monday, December 10, 2018
Tutorials

Astra – Create a Mega Menu with QuadMenu

The header is probably one of the most important sections of the website because is the first section with which the users will have a visual contact.

That’s why we have to talk to you about QuadMenu, a mega menu plugin that allows you to incorporate advanced functions and fully customize your Astra menu without programming skills.

Why QuadMenu?

We know many users utilize Astra for their own projects, and that’s the main reason why we strongly recommend QuadMenu over other mega menu alternatives like Ubermenu or Max Mega Menu.

Unlike its competitors, QuadMenu has been designed for developers and regular users as its offer additional hooks and filters that make it is incredibly easy to integrate QuadMenu with your theme.

The Astra Developers have a reason to smile as the team has developed an easy integration that’s available in the WordPress repository as QuadMenu Astra. With this plugin, you have the necessary code to easily integrate QuadMenu and Astra.

QuadMenu Features

  • Drag-and-drop interface
  • Responsive and mobile-friendly design
  • Unlimited menu themes
  • Include widgets in your menu
  • Mega menu and columns
  • Woocommerce product cart
  • Off-canvas and vertical menu layouts

Developer

  • Load your own .less files to compile the menu
  • Define the default options that the user will see
  • Define the developer options (user can’t change it)
  • Enable/ disable styles and scripts loading
  • Create your own custom dropdown animations
  • Add filters to modify the contents of the menu

Premium

  • Tabs Menu
  • Login Menu
  • Register Menu
  • Social Menu
  • Carousel Menu
  • Customizer Integration

WordPress Mega Menu – QuadMenu

How to integrate QuadMenu and Astra

As we told you before it’s incredibly easy to integrate this mega menu with Astra but, just in case, we will make a step by step tutorial.

Install QuadMenu

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.

Developer Features

As we’ve told you before if you are a WordPress developer you’ll love this mega menu as it includes special features to integrate with your theme, like the ability to load and compile your own .less files directly from your themes folder.

You can also define the default options of the menu themes, and what they’ve called developer options. These options act like constants that the user can’t change from the admin panel.

Conclusion

After analyzing QuadMenu and its integration we arrive at the conclusion that is one of the most configurable and simplest menu plugins for WordPress. Its intuitive drag and drop interface allows you to add new elements, create columns and add widgets or any other type of element available in the native WordPress panel.

We also must stand out the simple integration with Astra for both developers and end users, which is so simple as a child game. If you are Astra user we strongly recommend you to install and play a bit with this plugin, there just some clicks and you’ll be ready to boost your theme menu experience.

Leave a Reply