Choose how menus open responsively

In Beaver Builder Theme 1.7, 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

As of Beaver Builder Theme 1.7, there are several new settings in a Responsive nav layout field on the Customizer > Header > Nav Layout tab, which add 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.

Flyout overlay

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

Flyout push

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