Digishift Menu Widget

Content #

The Digishift Menu widget is a powerful tool for creating and styling custom navigation menus anywhere on your page with Elementor. It offers extensive control over both desktop and mobile menu appearances, far beyond the standard WordPress menu options.

Menu Content: #

Select and configure the core menu to be displayed.

• Select Menu: Choose from your existing WordPress menus (e.g., Primary Main Menu). You must create a menu  Appearance > Menus first.
• Layout: Choose the orientation of the menu.
  • Horizontal: A traditional top navigation bar.
  • Vertical: A stacked sidebar-style menu.
• Alignment: Control the horizontal alignment of the menu items (Left, Center, Right, Space Between).
• Submenu Indicator: Choose an icon (like a chevron ▼) to indicate menu items that have dropdowns.

Mobile Settings: #

Configure how the menu behaves on smaller screens.

• Mobile Breakpoint: Set the viewport width (in pixels) at which the menu switches to its mobile view. The default is typically 767px (portrait).
• Full Width: Enable this to make the mobile menu toggle button and dropdown span the full width of the screen.
• Menu Toggle Icon: Set the icon for the mobile menu button in its normal state (e.g., a hamburger icon ☰).
• Menu Toggle Icon Active: Set the icon for when the mobile menu is open (e.g., a close icon X).
• Toggle Align: Choose the alignment of the mobile toggle button (Left, Center, Right).

Style Tab #

The Style tab provides incredibly detailed control over the appearance of every part of the menu for both desktop and mobile views.

You can style the following parts:

• Main Menu: Style the top-level menu items.
  • Typography: Control the font family, size, and weight for all menu items.
  • Text Color: Set colors for Normal, Hover, and Active states.
  • Padding: Adjust the internal spacing inside each menu item.
  • Border Type & Radius: Add and style borders around menu items.
  • Spacing Between Items: Control the gap (margin) between individual menu items.
• Dropdown (Submenu): Style the dropdown panels that appear for sub-items.
  • Submenu Trigger: Choose what action opens the submenu (e.g., Hover or Click).
  • Text Alignment: Align the text within the submenu items (Left, Center, Right).
  • Text Color & Background Color: Set colors for submenu items in Normal and Hover states.
  • Width: Set a custom width for the dropdown panel (e.g., 200px).
  • Item Padding: Adjust the internal spacing for each submenu item.
  • Distance: Control the gap between the top-level menu item and its dropdown.
  • Border Type, Radius & Box Shadow: Add borders, rounded corners, and shadows to the dropdown panel to make it stand out.
• Toggle Button: Style the mobile menu hamburger button.
  • Text Color & Background Color: Set colors for the button in Normal and Hover states.
  • Icon Size: Control the size of the hamburger/close icon.
  • Padding: Adjust the spacing inside the toggle button.
  • Border Type & Radius: Style the button’s border.
  • Box Shadow: Add a shadow to the mobile toggle button.

Common Use Cases #

• Custom Headers: The primary use is for building completely custom headers with Elementor Pro’s Theme Builder.
• Sidebar Navigation: Using the Vertical layout, you can create navigation for sidebars or off-canvas menus.
• Footer Menus: Create a styled navigation menu in your footer.
• Landing Page Navigation: Design a unique menu for a specific landing page that differs from the site’s main header.