AstroHub - Off Canvas Effect in Advanced Menu

BB – Off Canvas Effect in Advanced Menu

Have you ever wanted to use the Off Canvas effect for Advanced Menu on your website?

You can use this feature by following the steps mentioned below.

Step 1:

Open the Advanced Menu Settings and select the menu that you had created in Dashboard > Appearance > Menu

AstroHub - Off Canvas Effect in Advanced Menu
AstroHub – Off Canvas Effect in Advanced Menu

Step 2:

Select Responsive Toggle in the Responsive Tab.
Hamburger Icon: Hamburger icon will be shown.
Hamburger Icon + Label: Hamburger icon will be shown followed by the user entered label.
Menu Button: A label entered by user will be shown.
None: Toggle button will not be shown.

AstroHub - Off Canvas Effect in Advanced Menu
AstroHub – Off Canvas Effect in Advanced Menu

Step 3:

Select Responsive Type > Off Canvas in the Responsive Tab.

AstroHub - Off Canvas Effect in Advanced Menu
AstroHub – Off Canvas Effect in Advanced Menu

Step 4:

Select a Direction in which you wish to show the Off Canvas Menu.

AstroHub - Off Canvas Effect in Advanced Menu
AstroHub – Off Canvas Effect in Advanced Menu

Step 5:

Enter Animation Speed for the Direction selected in step 4.

AstroHub - Off Canvas Effect in Advanced Menu
AstroHub – Off Canvas Effect in Advanced Menu

Step 6:

Select the appropriate Responsive Breakpoints
Always: Show Off Canvas on all devices i.e desktop, tablet, and mobile devices.
Medium and Small Devices Only: Show Off Canvas only in tablet and mobile devices.
Small Devices Only: Show Off Canvas only on mobile devices.
Custom: Select Custom to enter a custom breakpoint.

AstroHub - Off Canvas Effect in Advanced Menu
AstroHub – Off Canvas Effect in Advanced Menu

Receive our product updates, customer gift & daily product reviews