Kadence Tutorial: How to Make Giant Dropdown Menus with Kadence Themes

How about getting yourWordPressThe website enhances interactivity while presenting more diverse content using theKadencethematicMega Menu Featuresis a good choice. Today, we will teach you how to implement a giant dropdown menu with Kadence theme for a better navigation experience for your users.

1. Install and enable the required plug-ins

First, we need to install theKadencePaid version of the theme

and enable the following functions:

• Ultimate Menu
• Hooked Elements

These two features will provide you with more powerful menu customization, making Mega Menu settings more flexible.

2. Configuring the Mega Menu

go intoWordPressbackstageexterior condition > menupage, select the menu item you want to set as Mega Menu. After clicking the relevant button, you will enter the setting screen of the menu item. Here, you can make the following adjustments:

• Setting Icons: Add an icon for the menu item and set the display position of the icon, you can choose to put it on the left or right side.

• Adjust icon color and size: Adjust the colors and sizes of the icons as needed to better match the design style of your website.

• Setting the Mega Menu Width: Choose full-width mode to have the menu expand from left to right to achieve a visual effect that aligns the page content with the menu.

3. Setting the number of Mega Menu columns and background color

with regards toMega Menu, I chose a one-column layout, but actually achieved this by placing six content items. You can adjust the number of columns as needed.

The background color can be set to a global background color to ensure consistency with the overall design of the site.

To remove excess whitespace, you can also set the internal spacing to zero.

Remember to save the changes once you have completed the above settings.

4. Using shortcodes to create menu content

Next, we need to add theKadence(used form a nominal expression)elementalsection to create specific menu content. Enter theexterior condition > Kadence > elementalpage, you'll see that I've created two elements. Click on one of them to see how to add six product categories.

due toKadenceThe theme doesn't provide a visual product categorization element block, we can use theWooCommerceof the shortcode function to realize it.

The number in the shortcode indicates the ID of the product category, which you can get by following the steps below:

• Go to the backend of theofferings > categorizationpage, click to edit the category you need.

• Check the URL in your browser's address bar, where the number is the ID of the product category.

Once the ID is obtained, fill it into the shortcode in the following format:

commander-in-chief (military)IDReplace with the actual category ID.

5. Adding shortcodes and adjusting menu items

On the element page, click the "Add" button.

Select Default Settings and enter a title to ensure that the element can be displayed throughout the site and set to be visible to all users.

To add content, click on the plus sign, select the six-column layout format, and then paste the shortcode you obtained earlier.

Adjust the ID value in the shortcode as needed. If there are multiple shortcodes to add, you can use shortcuts to speed up the process.

If you need to adjust the order of the menu items, you can unlock the order of the columns, after clicking the unlock button, you can freely drag the columns to adjust their order.

When finished, save and publish the element.

6. Adding sub-menu items

Returns the backend of theexterior condition > menupage, add a sub-item to the Mega Menu. You can name this sub-item whatever you like, as it is only used to host the content of the Mega Menu and will not be displayed on the page.

Make it a sub-item of the first menu.

Refresh the page after saving and you will see that the new menu items have appeared. Click to expand the menu and the new content item will display six contents. Make sure that the width and structure of the menu items inherit the maximum width of the theme.

7. Checking the effect and adjusting the layout

Refresh the front-end page to see how the menu looks. You may need to do some final fine-tuning of the menu to make sure it displays properly and meets your design requirements.

summarize

With the above steps, you can easily make theKadenceCreate a Mega Dropdown Menu in the theme. Using the Mega Menu feature, you can provide users with a clearer, more dynamic menu so they can quickly find what they need.

If you have successfully set up Mega Menu, feel free to share your experience in the comments section!