Header Offcanvas Widget

The Header Offcanvas Widget is used to display navigation menus, contact details, or additional content in a clean and space-saving manner. This feature is especially useful for mobile layouts or minimalist header designs.

Follow the step-by-step instructions:

1. To customize Header Offcanvas, you can add your content before → Go to Templates.

2. Click Saved Templates.

3. Click Add New Template to create your content.

4. Create your content here and don’t forget to click Publish to save your content.

5. Go to Menu RTM Header & Footer, and you will be able to see the Header Offcanvas Widget.

6. Click Add New Container.

7. Select your layout : Flexbox or Grid.

8. On the canvas select your structure.

09. Drag the widget from the Elementor 

10. Drop it on the selected area.

11. Content Setting :

• Click Content → Menu Content.
• Select your Template.
• Click Icon Library → Choose Icon → Click Insert.

12. Style Setting (used to customize the icon, padding, background, and border style) :

• Click Style → Style Setting.
• Customize the alignment, icon size, padding, radius, icon, and background color here.

13. Tab Title Style (used to customize the off-canvas style) :

• Click Style → Offcanvas Setting.
• Customize the background color, offcanvas position, and width.

14. Offcanvas Close Button (used to customize the close button style) :

• Click Style → Offcanvas Close Button.
• Customize the icon size, margin, padding, radius, icon, and background color.

15. Don’t forget to click Publish to save the changes.