The Digishift Menu widget allows you to integrate and style navigation menus within your WordPress site, providing flexible layouts for both desktop and mobile views.

Menu Content #

This section controls the structure, layout, and functional behavior of your navigation menu.

• Select Menu: Choose the specific WordPress menu you want to display from the dropdown (e.g., “Primary”).
• Layout: Define the menu orientation as either Horizontal or Vertical.
• Alignment: Set the alignment of the menu items to Left, Center, or Right.
• Pointer: Add a visual indicator (like an underline or framed box) that appears when hovering over menu items.
• Submenu Indicator: Toggle to Show or Hide the icon that indicates a parent menu item has a dropdown.
• Select Icon: If the indicator is shown, you can choose a specific icon (e.g., a downward arrow) from the library.
• Margin: Adjust the external spacing around the menu container.
• Mobile Breakpoint: Select the screen width (e.g., Mobile Portrait (767px)) at which the standard menu switches to the mobile toggle view.
• Full Width: Toggle to Yes to make the mobile menu stretch across the entire width of the screen.
• Menu Toggle Icon Normal: Select the icon to be displayed when the mobile menu is closed (typically a “hamburger” menu).
• Menu Toggle Icon Active: Select the icon to be displayed when the mobile menu is open (typically an “X” or close icon).
• Toggle Align: Set the alignment of the mobile toggle button to the Left, Center, or Right of its container.

Style Tab: Main Menu #

This section allows you to customize the appearance of the top-level navigation items for the Digishift Menu across Normal, Hover, and Active states.

• Typography: Access full font controls to set the family, size, weight, and style for the menu text.
• Text Color: Define the specific color of the menu links for each state (Normal, Hover, and Active).
• Padding: Adjust the internal spacing (Top, Right, Bottom, Left) for each menu item to control its size and clickable area.
• Border Type: Choose from various border styles (e.g., Solid, Double) or keep it as Default.
• Border Radius: Round the corners of the menu items by defining pixel values for each corner.
• Spacing Between Items: Use the slider to increase or decrease the horizontal gap between individual menu links.

Style Tab: Dropdown #

This section controls the appearance of your menu’s submenus on desktop and the mobile menu container.

• Submenu Trigger: Choose the user action (e.g., Hover) that reveals the dropdown menu.
• Text Alignment: Set the alignment of the text within the dropdown to Left, Center, or Right.
• Colors (Normal & Hover):
  • Text Color: Define the color of the dropdown links.
  • Background Color: Set the color of the dropdown container.
• Dimensions & Spacing:
  • Width: Set the specific width of the dropdown panel in pixels.
  • Spacing Between Items: Adjust the vertical gap between individual dropdown links.
  • Distance: Define the vertical offset between the main menu and the start of the dropdown.
• Container Styling:
  • Border Radius: Round the corners of the dropdown menu.
  • Item Padding: Control the internal spacing within each individual dropdown item.
  • Border Type: Choose a border style for the container (e.g., Solid) or leave as Default.
  • Box Shadow: Apply a shadow effect to help the dropdown stand out from the page background.

Style Tab: Toggle Button #

This section allows you to customize the appearance of the mobile menu trigger icon (hamburger menu) for both Normal and Hover states.

• Text Color: Define the color of the toggle icon.
• Background Color: Select a background color for the toggle icon container.
• Icon Size: Use the slider to increase or decrease the physical size of the toggle icon.
• Padding: Adjust the internal spacing around the icon within its container to control the overall button size.
• Border Type: Choose from various border styles (e.g., Solid, Double) or leave as Default.
• Border Radius: Define the roundness of the button corners by setting pixel values for Top, Right, Bottom, and Left.
• Box Shadow: Add a shadow effect to the toggle button to make it stand out against the background.