How to build a megamenu?

All the menus applied in the site are created in Dashboard -> Appearance -> Menu . This WordPress manual provides detailed instruction on creating/editing/saving menus.

There are several menu locations: the Main menu, the Mobile menu and Side Menu. One and the same menu maybe displayed in both: Main, Mobile and Side. In addition, the Porto theme provides various options to display menus in any place on the site, it is possible to build as many menus (with megamenu) as required, more detailed descriptions of the menus options are provided here: Adding a menu to the site.

This input field is for the label displayed in menu item.

This field supports icons only from the provided source from porto – the field requires inserting the keyword from FontAwesome, simple-line-icons, porto icon. For example, the ID home icon code looks like this:

This option determines the type of the mega menu block: Narrow or Wide:
– Narrow – The drop-down menu has the narrow default width, and no mega block option appears.
– Wide – The menu has a wide width, allowing you to choose a Porto block as a mega menu block and set the width for its child menu items.

This option determines the position of the mega menu popup: Left, Right, Justify (Only Wide), Center (Only Wide), Full Width (Only Wide):
– Left – The drop-down menu aligns to the left of the parent menu item.
– Right – The drop-down menu aligns to the right of the parent menu item.
– Justify(Only Wide) – The drop-down menu sits inside the container, providing proper space on the left and right; this option works only when the menu type is “Wide”.
– Center(Only Wide) – The drop-down menu centers over the parent menu item; this option works only when the menu type is “Wide”.
– Full Width(Only Wide) – The drop-down menu stretches to the container width; this option works only when the menu type is “Wide”.

This option applies only when the menu type is “Wide” and sets the number of columns in the megamenu popup: 2 to 6 columns are possible.

This field specifies the width of the megamenu popup and is available only when the menu type is “Wide”.

This field applies custom styles to the megamenu popup inline.

This field appears only in child menu items where the parent menu type is set to “Wide”. The values in this field determine the width of the menu item itself. For example, if the value is 2.5 and the parent menu item has 6 columns as Popup Columns, it occupies 2.5/6 = 0.41666 of the full megamenu width.

This drop-down appears when you choose the menu type “Wide” in the parent menu item and presents all existing Porto Blocks for selection as a mega menu block.

– Background Image – this option determines the background image of megamenu. You can use images from 3rd party sites or your site media library.
– Background Position – set the position of megamenu background image
– Background Repeat – set the repeatness of megamenu background image
– Background Size – set the size of megamenu background image

– Title Attribute – Add title attribute to menu item using that field’s value
– Link Relationship (XFN) – Add rel attribute to menu item using that field’s value
– Preview Image – Preview Image which appears when hovering on it. Preview images are hidden in the Toggle and Sidebar menus.
– Tip Label – Determine the label will be added to the end of menu item navigation label.
– Tip Text Color – Determine the color of tip label. It is hexa-decimal form.
– Tip BG Color – Determine the background color of tip label. It is hexa-decimal form.

– CSS Classes(optional) – allow to insert a class and assign custom CSS, besides inserting class porto-open-newsletter would assign menu item to the theme Promo Popup.