1. Home
  2. Docs
  3. Xpro Addons For Beaver Builder
  4. Modules
  5. Advanced Menu

Advanced Menu

Introduction

How to add expanded items in the Xpro Advanced Menu Module?

Yes, you can use the option for already expanded items in the Advanced menu module. Do the following:
Step 1: Open the Advanced Menu module setting in the Themer Module section and go to the General Advanced Menu Tab.
Step 2: Go to the Layout section in General Tab and here you will see a drop-down menu.
Step 3: Now select the Expanded option and click the save button.

Now, your menu items will be displayed as already expanded on the screen and you can see your information in the drop-down menu.

How to Setup off Canvas Menu with Advanced Menu Module for Beaver Builder?

To set up an off-canvas Menu from the Advanced Menu module, you have to follow the following steps:
Step 1: Open the Advanced Menu module setting in the Themer Module section.
Step 2: Drag and drop an Advanced Menu from the Xpro Content area.
Step 3: Go to the General Tab and then go to the Responsive section under the General section.

Step 4: Select the Off Canvas menu option from the drop-down menu in the Menu Type.

Step 5: Now, select the Responsive Breakpoint option as Always in Responsive Menu. Responsive Breakpoint decides for which devices the menu will work for the same as desktop, tablets, and mobiles.

Step 6: Set the desired color and the background color by going to the Colors section under the Style Tab, and you can also style your menu from the Style Tab.
Step 7: Change the Typography of the text by going to the Typography Tab in Advanced Menu and clicking the button Save once you are done.

How to Setup Full-Screen Overlay Menu with Advanced Menu Module?

To set up a Full-Screen Overlay Menu, from the Advanced Menu module, you have to follow the following few steps:
Step 1: Open the Advanced Menu module setting in the Themer Module section.
Step 2: Drag and drop an Advanced Menu from the Xpro Content area.
Step 3: Go to the General Tab and then go to the Responsive section under the General section.

Step 4: Select the Full Screen Overlay menu option from the drop-down menu in the Menu Type.

Step 5: Now, select the Responsive Breakpoint option as Always in Responsive Menu. This will make the Menu appear on desktop devices as well.

Step 6: You can also change the Close Icon color, Hover effects, Border, Padding from the Responsive and Style Tab.
Step 7: Change the Typography of the text by going to the Typography Tab in Advanced Menu and clicking Save once you are done.

Was this article helpful to you? Yes No

How can we help?