1. Home
  2. Docs
  3. Animation
  4. Animation Widgets
  5. Create Animated Offcanvas

Create Animated Offcanvas

To add an animated Offcanvas to the header, you first need to open your pre-designed header by navigating to Crowdy Theme>Header Footer. Click on the “Edit with Elementor” option below the header name.

Animated Offcanvas

Once you’re on the Elementor page, look for the “WCF Animated Offcanvas” widget under the “WCF” section from the left panel. Add a new container to the header and drag the widget to it. 

animated offcanvas

Under the “Settings” option of the new pop-up option panel, choose a particular bar icon and write the button text for the Offcanvas. Add an  image for the sticky bar. 

animated offcanvas

Select a content source and preset style from the drop-down lists, located next to “Content Source” and “Preset Style” options. Enable the “Custom Bar” button if you wish to attach a customized bar with your favorite image.

animated offcanvas

Under the “Custom Content” option, enable the “Show Logo/Custom Image” button, attach a logo or image, set the image resolution,  add the requisite items to the “Contact Info“, “Language Info”, and “Follow Info”

Then personalize the “Copyright” field and choose the Offcanvas menu from the “Menu” option.

animated offcanvas

Adjust the measurement, icon, and position of the Offcanvas close button from the “Close Button” option. You can also customize the style of all Offcanvas elements from the “Style” section.

animated offcanvas

 

How can we help?