{"id":78,"date":"2016-06-21T19:11:54","date_gmt":"2016-06-21T19:11:54","guid":{"rendered":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/?p=78"},"modified":"2016-06-23T10:02:48","modified_gmt":"2016-06-23T10:02:48","slug":"how-to-setup-mega-menu-dropdown-multi-column-dropdown","status":"publish","type":"post","link":"https:\/\/fluentthemes.com\/knowledgebase\/zionhost\/how-to-setup-mega-menu-dropdown-multi-column-dropdown\/","title":{"rendered":"How to Setup Mega-Menu Dropdown \/ Multi-Column Dropdown"},"content":{"rendered":"

Once ‘The Zionhost Extensions’ plugin is activated ‘Mega Menu’ is available in your admin panel dashboard.<\/p>\n

\"mega1\"<\/p>\n

Enable WPBakery for Mega Menu (2 Steps)
\n<\/strong><\/p>\n

1. Navigate to WPBakery > Role Manager<\/p>\n

2. In Post Types choose ‘Custom’ and then make sure zionhost_mega_menu is checked.<\/p>\n

\"mega2\"<\/p>\n

Add a new Mega Menu item (8 Steps)
\n<\/strong><\/p>\n

1. Navigate to Mega Menu > Add New<\/p>\n

2. Give it a title, lets say “Mega Menu One” item. The title is not used anywhere in displaying the menu.<\/p>\n

3. Click on Backend Editor. It will display WPBakery Backend Editor. We will use this back end editor to build our Mega Menu item.<\/p>\n

\"mega3\"<\/p>\n

4. Click on ‘Add Element’ and from the elements popup choose ‘Row’ element.<\/p>\n

5. Choose how many columns you want in the mega menu. Lets say we want 4 columns.<\/p>\n

\"mega5\"<\/p>\n

Note: Do NOT choose any columns if you are using ‘FT- Mega Menu Two’
\ninstead of ‘FT- Mega Menu’ element. We will explain you, when you should use ‘FT- Mega Menu Two’ instead of ‘FT- Mega Menu’.<\/p>\n

6. Now in each column insert ‘FT- Mega Menu’ element.<\/p>\n

\"mega4\"<\/p>\n

Note: Use ‘FT- Mega Menu Two’<\/strong> instead of ‘FT- Mega Menu’ if you are planning to implement WHMCS<\/strong> with your website.<\/p>\n

7. In the ‘FT- Mega Menu’\/’FT- Mega Menu Two’ element settings popup you can fill the form by inputting your menus, urls and icons.<\/p>\n

\"mega6\"<\/p>\n

8. Click on Publish button.
\nNote: If you use ‘FT- Mega Menu Two’<\/strong>, do not click on Publish button yet. Click on ‘Classic Mode’<\/strong> button and then remove vc_row<\/strong> and vc_coumn<\/strong> shortcodes from first line and from the last line as shown in the below screenshot. After that click on ‘Publish’<\/strong> button.<\/p>\n

\"mega-menu-two\"<\/p>\n

Adding Mega Menu item as a submenu to a top level menu item (7 Steps)
\n<\/strong><\/p>\n

1. Navigate to Appearance > Menus.<\/p>\n

2. On top right corner of your screen, you will find a dropdown menu Screen Options. Click on it.<\/p>\n

3. Make sure ‘Mega Menu Post’ and ‘CSS Classes’ are checked.
\n\"mega7\"<\/p>\n

4. Choose the Main Menu as the menu location, since only Main Menu zionhost Mega Menu in our theme.<\/p>\n

5. Now check the Test Mega Menu item and click on Add to menu.
\n\"mega8\"<\/p>\n

6. Drag the Test Mega Menu item box and drop it under any existing menu as a submenu<\/p>\n

\"mega9\"<\/p>\n

7. If you want the menu as wide as you see in the theme preview, write ‘wide-menu’ in the CSS Class field of the parent menu. In this case ‘Blog’ is the parent menu of the sub Mega Menu<\/p>\n

\"mega10\"<\/p>\n

8. Now the Mega Menu is added as a submenu of Blog and it should look like this:<\/p>\n

\"mega11\"<\/p>\n

Important Note: Please do not use Mega Menu as a top level menu item or as submenu menu item beyond level 1. Do not use other menu items with Mega Menu item.<\/strong><\/p>\n

It is important to use ‘FT- Mega Menu Two’ instead of ‘FT- Mega Menu’ if you implement zionhost WHMCS template with your website. If you do not do that, the Mega menu will look fine in your main website pages, but it will break in WHMCS pages.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Once ‘The Zionhost Extensions’ plugin is activated ‘Mega Menu’ is available in your admin panel dashboard. Enable WPBakery for Mega Menu (2 Steps) 1. Navigate to WPBakery > Role Manager 2. In Post Types choose ‘Custom’ and then make sure zionhost_mega_menu is checked. Add a new Mega Menu item (8 Steps) 1. Navigate to Mega […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/zionhost\/wp-json\/wp\/v2\/posts\/78"}],"collection":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/zionhost\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/zionhost\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/zionhost\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/zionhost\/wp-json\/wp\/v2\/comments?post=78"}],"version-history":[{"count":0,"href":"https:\/\/fluentthemes.com\/knowledgebase\/zionhost\/wp-json\/wp\/v2\/posts\/78\/revisions"}],"wp:attachment":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/zionhost\/wp-json\/wp\/v2\/media?parent=78"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/zionhost\/wp-json\/wp\/v2\/categories?post=78"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/zionhost\/wp-json\/wp\/v2\/tags?post=78"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}