Offcanvas Content particle documentation

  • Tony
  • 8 April 2020
  • No comments
  • Docs
Create an off-canvas sidebar with your custom content (menu items, text or social icons)that slides in and out of the page, which is perfect for creating mobile navigations. See live Demo Page.

# Offcanvas Content Package contents

Files Description
jloffcanvascontent.yaml Contains the Offcanvas Content particle settings.
jloffcanvascontent.html.twig The Twig file to pull information, settings.

Installation Installing the particle on your website is a really simple process. You can refer to the document here to know more.

Requirements Offcanvas Content requires Uikit 3 for Gantry 5 Atom to be installed and enabled in your theme layout settings.

Go to Template/Theme Settings > select the Layout to add Offcanvas Content particle (i.e: Home) -> Layout tab -> Drag and drop the Offcanvas Content from Particles panel (left corner) to the section you want to display the particle.

Settings

Tab Content

Settings Description
Toggle Item Choose the toggle item between Icon or Button.
Toggle Item Text Add the toggle item text, i.e: Menu
Button Size Set the button size.
Menu Items Create each menu item to appear in the menu list. You can add new items to the collection using the plus + icon
Social Items Create each social item to appear in the list row. You can add new items to the collection using the plus + icon
CSS Classes CSS class name for the particle.

Menu Items You can add new menu item to the collection using the plus + icon

Social Items You can add new social item to the collection using the plus + icon

Tab Style

Offcanvas Settings Common settings for Offcanvas

Settings Description
Close Icon Use this option to create a close button and enable its functionality.
Overlay Use this option to add an overlay, blanking out the page.
Animation You can actually choose between different animation modes for the off-canvas’ entrance.
Flip mode Use this option to adjust its alignment, so that it slides in from the right.
Divider Use this option to create a divider separating offcanvas contents.
Order Define the order of the offcanvas contents.
Offcanvas Width Customize the width for offcanvas bar, leave default if not needed.
Background Color Customize the background color for offcanvas bar.
Inverse Color Set light or dark color mode for nav icon, buttons and controls.

Nav Settings Common settings for Nav

Settings Description
Nav Style Select the nav style.
Multiple open subnavs When clicking on a parent item, an open one will close, allowing only one open nested list at a time. Check this option to allow multiple open subnavs.
Center Nav Use this option to center nav items.
Nav Color Customize the nav item color if needed.
Force Icon Color If you use white background color, check this option to inverse the style of icon color.
Margin Top Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.

Social Settings Common settings for Social

Settings Description
Background Color Customize the background color for social icons.
Customize Icon Color Customize the color for social icons.
Background Hover Customize the background color on hover/active/focus for social icons.
Icon Hover Customize the color on hover/active/focus for social icons.
Margin Top Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.

Content Settings Common settings for Content Style

Settings Description
Custom Color Customize the content color.
Font Size Customize the content text font size.
Margin Top Set the top margin. Note that the margin will only apply if the content field immediately follows another content field.

General, Parallax and Parallax Background tab

Please take a look the documentation here for more detail about these tabs settings

Video Tutorial

Comments

Leave a Reply

You must be logged in to post a comment.