Skip to main content

Off-canvas

How do I add content to the offcanvas component?

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.

How do I style the Off-canvas element?

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.

Which position options are available?

You can display the Off-canvas element on either the left or right side of the screen.

Is it possible to align the Off-canvas content in the middle?

Yes, you can optionally align the Off-canvas content in the middle of the sidebar.

Can I push some part of the content to the bottom of the Off-canvas element?

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.

Can I use dynamic content in the Off-canvas element?

Yes, you can utilize all available dynamic content options within the Off-canvas element content area.

Can I use multiple Off-canvas element instances on the page?

Yes, you can have any number of Off-canvas element instances on the page, each with different content inside.

Which animation modes are available?

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.
Can I hide a toggle button and trigger the Off-canvas from a custom button?

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.

Can I use an icon without text to trigger the Off-canvas?

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.