Responsive menu flyout animations

By default in the Woo360 Theme, when you click the Hamburger or the Menu icon, a dropdown menu appears below the header, as shown in the following screenshot on a mobile device.

Figure 1: Dropdown responsive nav layout

As of Woo360 Theme 1.7, there are several new settings in a Responsive nav layout field, which add flyout animations to how the responsive menu appears 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