Hamburger Panel Widget Overview

Navigate to the Crocoblock > JetPlugins Settings > JetBlocks of the WordPress Dashboard. Unroll the Widgets tab and move the Hamburger Panel toggle to activate the widget.

Users can add this widget to page templates. 

The tutorial explains How to display any template within a hamburger panel.

Open the page template in the Elementor page builder. Find the widget’s icon and drag and drop it on the page.

Content settings

Unroll the Content tab of the Content settings to customize the icon and template settings:

Customization Panel Icons

• Icon tab allows choosing an icon (by uploading SVG files or choosing from the library) to show the hamburger panel icon;
• Active Icon and Close Icon allows choosing the icons (by uploading SVG files or choosing from the library) of the active and close hamburger panel;
• Label field to type the text displayed on the panel instead of the More text by default;
• Toggle Alignment allows placing the panel for different devices;

Custom template usage

• Choose Template drop-down menu allows choosing a template for the panel (i.e., here, the filters template was applied, and the built hamburger panel allows filtering). The panel displays this template after clicking the panel’s button (here, the “Click here to find the property” button on the page).

Customization of Content Settings

The Settings tab of the Content settings manages the following:

• The Position drop-down menu of the widget allows choosing the position of the panel from the Right or Left;
• Effect drop-down menu allows applying the Slide, Fade, or Zoom effect to the panel;
• The z-Index field allows typing a hamburger panel position referring to the vertical axis;
• Use Ajax Loading for Template toggle, if enabled, applies the Ajax loading for the panel’s template and turns on the Use Cache for Template toggle to use or not the cache.

Style settings

The Style tab has the Panel and Toggle settings.

Styling of Panel settings

• Panel settings manage the Panel Width (in pixels and percentages for different devices), Padding (four fields to type the paddings in pixels and percentages for other devices), Background Type drop-down menu (the Classic and Gradient options), Color, Image, Position menu (for other devices), Attachment menu (for other devices), Repeat menu (for other devices), Size (for other devices), Border (Type, Width, Color, Radius, Box Shadow), Cover, Close Button, and Loader Styles.

Styling of Toggle appearance

• Toggle settings manage Background Type, Padding (in pixels and percentages for different devices), Margin (in pixels and percentages for other devices), Border Type, Color, Border Radius (in pixels and percentages for other devices), Box Shadow, Icon Styles, and Label Styles.