Mega Menu Element

Basically a mega menu is a type of expandable menu in which many navigation links or elements are displayed in a two-dimensional dropdown layout. With the Stax builder, you can design the menu with different content layouts and elements included.

Similar to the normal menu, it comes with more options for menu settings, style, and layout apart from those available in your theme or widget area. 

Adding the Mega Menu Element

To add the mega menu element to a section or a header:

  • Click on the Elements icon on the top right corner panel.
  • Drag the mega menu element to header/section layout. You can choose where to drop the element by following the pink line and releasing it there.

Mega Menu Element Settings

Under the menu options you can first enter the text to be displayed on the menu. Then select the trigger icon for the menu to display on your page. You can then set the size of the menu in pixels. Next you can opt to choose between the left and right side menu positions. This is where the menu items will display. Upon choosing you can add several elements too in the mega menu menu.

Mega Menu Styling

Under the styling section there are options to change the text styling, the icon and mega section styling.

To start with the text styling, it basically involves the typography options where you can change the family font, font size, font weight, text transform, text style and letter spacing.You can then select the text color under normal and hover modes.

Next is the icon styling, for this you can change the layout options such as padding, margin and border radius size on all sides. Then you would select the icon color and its background color and lastly select a border type with a border color too in both normal and hover states.

Finally we have the mega section styling where you can alter the layout settings such as padding margin and border radius of the side menu modal display. Next you can add a shadow effect by adjusting the X and Y (horizontal and vertical) positions then changing the blur and spread values to match your preferred look.

After that choose a background color and select a border type (solid, double, dotted, dashed) then select the border’s color.