Setting Up Different Menus In Kadence

Estimated reading: 7 minutes 78 views

Navigation menus are essential for guiding users through your site in WordPress. You can easily create, manage, and customize menus within the WordPress dashboard. Kadence offers an additional layer to the standard WordPress menus. Creating and managing navigation menus in Kadence is similar to the general WordPress process but with additional customization options.

Here’s a step-by-step guide to working with navigation menus:

Accessing the Menus Section:

From the WordPress dashboard, go to Appearance > Menus. If there’s no menu yet, you’ll see an option to create one. Click on “Create a new menu.”

Creating a New Menu Name:

Menu Name: Enter a name for the menu under Menu Structure (this won’t be visible to users).

What To Add To Your Menu:

You can add different items to your menu and rearrange them by dragging and dropping. Here are some options:

Pages: Select pages from the list to add them to your menu.
Posts: You can also add individual blog posts.
Custom Links: Create a menu item linking to an external site or internal page.
Categories: Link directly to category pages, which display posts from that category.
Custom Links: These are usually used for external links or creating dead links. A dead link is more of a title without a link, and it uses a hashtag (#) in the URL section.

Setting the Menu Location:

WordPress typically supports multiple menu locations (e.g., primary, footer, or social menus). Depending on your theme, you may have more options for allocating your menus; Kadence currently has seven options and can be set to logged in and logged out. Check the appropriate box under Menu Settings to assign the menu to one of the available locations, then save the menu.

Managing Menu Structure:

Sub Menus: You can create dropdown menus.
Rearranging: Drag and drop items to reorder them.
Editing: Each menu item can be customized (label text, URL, etc.) by clicking the small arrow to the right.
Deleting: To remove a menu item, expand it and click the Remove link.

Adding Dropdown Menus (sub Menus):

Go to Appearance > Menus, then create a new menu by selecting the items you’d like to include or modifying an existing menu.
To arrange menu items in a hierarchical order, drag them below and slightly to the right of the parent item to create a dropdown effect.
Go to Appearance > Customize > Header, then click on the menu where it is located, e.g., Primary Navigation or Secondary Navigation. From there, click on the Dropdown Menu to open various customization options for the dropdown, including modifying the alignment, background colors, typography, padding, and hover effects.

Customizing Menus in the Kadence Customizer:

Kadence allows you to customize your menus more thoroughly through the WordPress Customizer. To do this, go to Appearance > Customize and follow these steps:

Header Layout: Kadence includes a Header Builder where you can drag and drop different elements (including the navigation menu).
In the Header section, click the Primary Navigation or Secondary Navigation options, depending on where you want the menu.
You can control the placement, alignment, and style of the menu within the header.
You can customize the mobile menu by going to the Mobile settings within the Header Builder. You can configure how the menu behaves on smaller screens, such as using a hamburger menu, adjusting font sizes, or enabling a sticky header.

Kadence also gives you access to extensive design options, including:

Typography: Adjust the font, size, and color of the menu items.
Colors: Customize the background color, link color, hover effects, and active menu item colors.
Spacing: Control the padding and spacing between menu items.
Dropdowns: If you have submenus (dropdowns), you can control their design separately, such as the dropdown background color, border, and animation.

Using Kadence Header Builder for Menus:

Kadence’s Header Builder is a drag-and-drop interface that allows for advanced customization of your navigation menus. This also applies to their footer.

Add Elements: You can add various elements to your header, such as search bars, social icons, or widgets, alongside your navigation menu.
Sticky Header: Kadence supports sticky headers, where the menu remains visible as users scroll down the page. You can enable this feature in the Header Builder under Sticky Options.
Conditional Menus: You can set up different menus based on user roles or specific conditions (e.g., show one menu to logged-in users and a different one to guests).

Using the Kadence Conditional Headers:

Kadence allows you to create conditional headers in their pro version, where different headers (and menus) are shown on specific pages or to different user types.

Go to Customize > Header and use the Conditional Header option.
You can set conditions to display a certain menu only on specific pages or for specific devices (desktop, tablet, or mobile).

Mega Menus with Kadence:

Kadence supports mega menus in their pro version, allowing you to create large, multi-column dropdowns that include images, icons, and widgets.

To set up a mega menu, you’ll need to enable the Kadence Blocks Pro plugin, which integrates with the theme.
Once enabled, you can create complex menu structures by adding custom content (like blocks) to your dropdown menus.

Using Widgets for Menus:

If you want to add a menu to a sidebar or footer, go to Appearance > Widgets, add the Navigation Menu widget, and select the menu you want to display.

Responsive Menus in Kadence:

Kadence is fully responsive, ensuring that menus adapt well to different screen sizes to work well on mobile devices.

Mobile Menu: In the Customizer, you can customize the appearance and behavior of the mobile menu. You can control whether it appears as a dropdown or uses a hamburger icon.
Tablet View: Kadence lets you preview how your menu will look on tablet and mobile devices within the Customizer.

Advanced Menus:

Kadence offers advanced menu options that enable more advanced features for creating highly customizable menus with images, icons, and dynamic content. Open the created menu tab to expand it, then click on Menu Item Setting to make your desired changes.

Advanced Menu Properties:

A Screen Option is at the top of your screen; click on the arrow in the top right-hand corner of the menu item to expand it.

Screen Elements: Choose which elements you want to view for your menu settings.
Show Advanced Menu Properties: This option is specific to the menu tabs.
Title Attribute: This field specifies the menu item’s Alternative (‘Alt’) text. This text will be displayed when a user’s mouse hovers over a menu item.
Link Target: Select “Same window or tab” or “New window or tab” from the pulldown. We suggest you only use this for external websites.
CSS Classes: Optional CSS Classes for this menu item.
Link Relationship (XFN): This allows for the automatic generation of XFN attributes so you can show how you are related to the authors/owners of the site to which you are linking.
Description: Description for this link. The menu will display the description if the current theme supports it.

Tips for Effective Menus:

Keep it simple: Include only essential items to avoid overwhelming users.
Logical structure: Arrange the menu in a way that makes sense for your site’s navigation flow.
Use drop-downs sparingly: Too many nested submenus can confuse users.

Summary of Key Features:

Header Builder: Kadence offers drag-and-drop customization of menus and other header elements.
Mobile & Sticky Menus: Responsive design and sticky headers are easy to implement.
Mega Menus: Kadence supports mega menus, enabling more complex navigation.
Conditional Menus: Set up different menus based on page or user conditions.
Customizer Integration: Design and modify menus directly in the WordPress Customizer.

NOTE: For information on menus specific to your theme, please check the knowledge base for the theme you bought (you must be logged in to view this).

Related Resources

Kadence

Setting Up Different Menus In Kadence

Accessing the Menus Section:

Creating a New Menu Name:

What To Add To Your Menu:

Setting the Menu Location:

Managing Menu Structure:

Adding Dropdown Menus (sub Menus):

Customizing Menus in the Kadence Customizer:

Using Kadence Header Builder for Menus:

Using the Kadence Conditional Headers:

Mega Menus with Kadence:

Using Widgets for Menus:

Responsive Menus in Kadence:

Advanced Menus:

Advanced Menu Properties:

Tips for Effective Menus:

Summary of Key Features:

Related Resources

Leave a Reply Cancel reply

CONTENTS

Join The Party For Fun Updates freebies & Big Discounts!

your Presence Matters!

Quick Links

Hire Us

Help

Terms Of Use FAQs

Payment FAQs

Order FAQs

Support FAQs

Popular Pre-Sales FAQs

Redesigning FAQs

Adding A Sticky Sidebar Using CSS

Scroll To Top Using Code Using CSS

Choose Your Hosting

Start Here

Frequently Asked Questions

Creating Sticky Sidebars Using CSS

Subscribe