How to use Off-Canvas Menu Widget of Sky Addons for Elementor
Sky Addons Off-Canvas Menu Widget is a powerful tool that lets you create a hidden, slide-out menu for your Elementor website. This is perfect for creating a clean, modern look, especially on mobile devices. It’s packed with options to customize the menu’s appearance and behavior, making it a valuable addition to your essential addons for Elementor. Use it to build an amazing elementor website.
Description:
The Off-Canvas Menu widget provides a responsive and stylish navigation solution, ideal for enhancing user experience on any elementor landing page. As part of your elements pack, this widget allows you to create a hidden menu that slides in from the side (or top/bottom) of the screen, saving valuable screen real estate. It’s a fantastic way to offer a full-featured menu without cluttering your design. Whether you’re building a simple blog or a complex e-commerce site, the Off-Canvas Menu widget offers the flexibility and customization you need. It integrates seamlessly with elementor pro and works great with elementor themes. This widget is one of the best elementor plugins.
Key Features List:
- Multiple Menu Support: Display multiple menus, each with its own title, within the off-canvas area.
- Customizable Position: Choose where the menu slides in from (left, right, top, or bottom).
- Social Media Integration: Easily add social media links to the bottom of the menu.
- Extensive Styling Options: Control the colors, typography, backgrounds, and spacing of every element.
- Behavioral Settings: Adjust the menu’s behavior, such as how submenus open and whether it closes on click or Esc key press.
Inserting the Off-Canvas Menu Widget
- Open Elementor Editor. In the Elementor panel, search for “Off-Canvas Menu”.
- Drag and Drop the Widget to the desired location on your page / editor.
Layout Section
This section controls the basic structure and content of your off-canvas menu.
- Select Menu: Choose the WordPress menu you want to display (only if Multi Menu is disabled).
- Multi Menu: Enable to display multiple menus with section titles.
- Menu Sections: (Repeater) Add and configure individual menu sections:
- Section Title: The title displayed above the menu section.
- Select Menu: The specific menu to display in this section.
- Show Title: Toggle to show or hide the section title.
- Position: Choose the menu’s entry point (left, right, top, bottom).
- Nav Title: Add a title at the top of the off-canvas menu.
- Show Social Media Links: Enable to display social media icons at the bottom.
Additional Section
This section provides extra options to fine-tune the menu’s behavior.
- Width: Set the width of the menu (for left/right positions).
- Height: Set the height of the menu (for top/bottom positions).
- Expanded Mode: Keep the menu always visible (doesn’t push content).
- Level Open Effect: Choose how submenus open (overlap, expand, none, or false).
- Level Spacing: Adjust the spacing between submenu levels.
- Close on Click: Close the menu when a link is clicked.
- Close on Esc: Close the menu when the Esc key is pressed.
- Custom Toggle: Specify a CSS selector for a custom element to trigger the menu.
- Label Back: Customize the “Back” button label for submenus.
Social Media Section
This section lets you add and configure social media links.
- Social List: (Repeater) Add individual social media links:
- Choose Icon: Select an icon for the social media platform.
- Link: Enter the URL for the social media profile.
Style Customization
The following sections allow you to customize the appearance of the off-canvas menu.
Layout Style Section
Customize the overall layout and background of the off-canvas menu.
- Menu Item Spacing: Adjust the spacing between menu items.
- Nav Content Padding: Control the padding around the menu content.
- Overlay Color: Set the color of the overlay behind the menu.
- Background: Customize the background of the menu area.
- Backdrop Blur: Add a blur effect to the content behind the menu.
- Arrow Color: Change the color of the submenu indicator arrows.
- Sub Menu Indicator Color: Change the background color of the submenu indicator.
Off-Canvas Nav Section
Style the individual menu items and links.
- Menu Color: Set the color of the menu text.
- Link Background Hover: Customize the background color on hover.
- Typography: Control the font, size, and style of the menu text.
- Menu Item Padding: Adjust the padding around the menu items.
- Menu Item Margin: Adjust the margin around the menu items.
- Border: Add a border to the menu items.
Nav Title Section
Style the main title of the off-canvas menu.
- Title Color: Set the color of the title text.
- Typography: Control the font, size, and style of the title text.
- Background: Customize the background of the title area.
- Padding: Adjust the padding around the title.
- Margin: Adjust the margin around the title.
- Border: Add a border to the title area.
- Border Radius: Round the corners of the title area.
Section Title Section
Style the titles of individual menu sections (when using Multi Menu).
- Title Color: Set the color of the section title text.
- Typography: Control the font, size, and style of the section title text.
- Background: Customize the background of the section title area.
- Padding: Adjust the padding around the section title.
- Margin: Adjust the margin around the section title.
- Border: Add a border to the section title area.
- Border Radius: Round the corners of the section title area.
- Text Align: Align the section title text (left, center, right).
Toggle Section
Style the menu toggle button (if not using a custom toggle).
- Alignment: Align the toggle button (left, center, right).
- Toggle Color: Set the color of the toggle button lines.
- Toggle Width: Adjust the width of the toggle button lines.
- Toggle Padding: Adjust the padding around the toggle button.
- Toggle Margin: Adjust the margin around the toggle button.
- Border: Add a border to the toggle button.
- Border Radius: Round the corners of the toggle button.
Social Icons Section
Style the social media icons.
- Icon Color: Set the color of the social media icons.
- Icon Hover Color: Set the color of the icons on hover.
- Icon Size: Adjust the size of the icons.
- Icon Hover Background: Set the background color on hover.
- Border Top: Add a top border to the social navigation area.
- Border Radius: Round the corners of the icons.
Save and Preview
- Once you’ve customized and styled your accordion, click “Publish” or “Update” to save your changes.
- Preview the page to ensure the widget looks and functions as desired.
Troubleshooting
- Menu Not Appearing: Ensure a menu is selected in the “Layout” section. If using Multi Menu, make sure each section has a menu assigned.
- Custom Toggle Not Working: Double-check that the CSS selector in the “Additional” section is correct and points to an existing element on your page.
Conclusion
The Sky Addons Off-Canvas Menu widget is a versatile tool for creating stylish and functional navigation menus on your Elementor website. With its extensive customization options and ease of use, you can create a menu that perfectly complements your site’s design and enhances the user experience. It is one of the best premium addons for elementor.
If you have any questions or encounter any challenges while using, please don’t hesitate to reach out to our dedicated support team at https://wowdevs.com/support/ where our expert team is ready to provide prompt and helpful assistance.