BB – Overlay Effect in Advanced Menu

BB – Overlay Effect in Advanced Menu

Have you ever wanted to use the Overlay 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 - Overlay Effect in Advanced Menu
AstroHub – Overlay 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 a user entered label.
Menu Button: A label entered by user will be shown
None: No Toggle button will be shown.

AstroHub - Overlay Effect in Advanced Menu
AstroHub – Overlay Effect in Advanced Menu

Step 3:

Select Responsive Type > Overlay in the Responsive Tab.

AstroHub - Overlay Effect in Advanced Menu
AstroHub – Overlay Effect in Advanced Menu

Step 4:

Select Effects for the Overlay Menu.

AstroHub - Overlay Effect in Advanced Menu
AstroHub – Overlay Effect in Advanced Menu

Step 5:

Enter Animation Speed for the Effect selected in step 4.

AstroHub - Overlay Effect in Advanced Menu
AstroHub – Overlay Effect in Advanced Menu

Step 6:

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

AstroHub - Overlay Effect in Advanced Menu
AstroHub – Overlay Effect in Advanced Menu