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?

You can achieve this by setting a static ID for the Off-canvas element and hiding the default toggle button. Then, create a custom button with a "uk-toggle" attribute and use the static ID as a link with the leading # symbol.

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.