Off-canvas
- YOOtheme Pro: Version 4.2 or higher
- Joomla!: Version 4.4 or higher
- WordPress: Version 6.6 or higher
- PHP: Version 8.1 or higher
The Off-canvas element is compatible with the latest technologies and is continuously updated to support new versions, including PHP 8.4, Joomla 5, and the latest YOOtheme Pro version, among others.
You can add content to the Off-canvas element by utilizing any of the available builder elements within YOOtheme Pro. Simply select the desired elements and arrange them to create your off-canvas content.
You can customize the appearance of the Off-canvas element by navigating to the Style section in the YOOtheme builder.
Builder -> Style -> Off-canvas
From here, you can access additional styling options to adjust the look and feel of your Off-canvas to fit your design preferences.
You can display the Off-canvas element on either the left or right side of the screen.
Yes, you can optionally align the Off-canvas content in the middle of the sidebar.
Yes, you can achieve this by selecting the specific row containing the content you wish to push to the bottom within the Off-canvas element. By adjusting the layout or positioning of elements within that row, you can effectively push content to the bottom.
Yes, you can utilize all available dynamic content options within the Off-canvas element content area.
Yes, you can have any number of Off-canvas element instances on the page, each with different content inside.
There are four animation modes available for the Off-canvas element:
- Slide: The Off-canvas slides out and overlays the content. This is the default mode.
- Push: The Off-canvas slides out and pushes the site content.
- Reveal: The Off-canvas slides out and reveals its content while pushing the site.
- None: The Off-canvas appears and overlays the content without any animation.
Yes, you can. First, assign a unique Off-canvas ID in the element's "Settings" tab. The ID must start with a letter, as required by HTML standards. Below this field, enable the "Toggle Helper" option. Once enabled, you can trigger the Off-canvas using a custom button or link with the following URL format: #fs-toggle=my-offcanvas-id (replace my-offcanvas-id with your actual Off-canvas ID). If you want to hide the default Off-canvas button, you can do so in the "Content" tab under the sublayout settings.
Yes, you can do that. Additionally, you have the option of selecting a custom icon to serve as the trigger for the Off-canvas element.