You can choose how menus open when you click the Hamburger icon or MENU label: a dropdown or a flyout animation. This setting is located at Customize > Header > Nav layout > Responsive nav layout.
Responsive menu dropdown
By default in the Beaver Builder Theme, when you click the Hamburger icon or the Menu label, a dropdown menu appears below the header, as shown in the following screenshot on a mobile device. The dropdown menu pushes down the page content as it opens.
Figure 1: Dropdown responsive nav layout
There are several settings in the Responsive nav layout field on the Customizer > Header > Nav Layout tab, which offer the following flyout animations when you click the hamburger or Menu icon.
- Dropdown (default)
- Flyout overlay
- Flyout push
- Flyout push with opacity
There's also a new Responsive nav layout position field, which lets you choose whether the flyout occurs from the left or the right.
With Flyout overlay, the menu flies in from the left or right (depending on the Responsive nav layout position setting), and overlays the main screen with a semi-opaque background, as shown in the following screenshot.
Figure 2: Flyout Overlay responsive nav layout
With Flyout push, the menu flies in from the left or right (depending on the Responsive nav layout position setting), but pushes the main screen to the side, as shown in the following screenshot, where Responsive nav layout position is set to Left.
Figure 3: Flyout Push responsive nav layout
Flyout push with opacity
With Flyout push with opacity, the menu animation is the same as for Flyout push but additional the main screen has a semi-opaque dark overlay, as shown in the following screenshot.
Figure 4: Flyout Push with Opacity responsive nav layout