Create(Or Edit) your Website Header Menu & Dropdowns in Kadence

Below are the following “step by step” instructions to adding or customising your Websites Header Menu & Dropdown boxes in the Kadence Theme.

Businesses need to edit their header menus and drop-down lists to adapt to changing products, improve user navigation, and optimize for mobile devices. Therefore, If you have set up new pages, have low reader engagement or focusing on conversions, this rearranging your header could be a good place to start.

To install:

• For a visual experience, please click below for the video on my YouTube channel,
• or scroll down further for the written instructions.

Starting in your WordPress dashboard,

1. Setting up Pages to Add to your Header Menu

Firstly, I just wanted to say that “Pages” are not the only items you can add to your Header Menu. You can also use “Posts”, “Categories” and even create a “Custom URL links”.

I just find that “Pages” are the most commonly used.

For today’s tutorial, I’m on the expectation that you have already set up the pages that you want to add to your header menu. However, if you haven’t then please:

• Hover on “Pages” and click “All Pages.
• Then press the button to “Add Page”.
• Add a Title and Design the page you want to include and press “Publish”.

2. Creating Header Menu

Back into your WordPress Dashboard to create your first Header Menu:

• You need to hover on “Appearance” and click “Menus”.
• Press the “Create new Menu” link at the top
• Where is says “Menu Name” , you have a free text option to name your menu.
• Then press the blue “Create Menu” button

If you view the left hand side section under “Add menu Items” you have the choice between:

• Pages
• Posts,
• Custom Links (maybe social media or call to actions on other websites)
• and categories

There is also a filter for “Most recent”, “View all” and “Search”.

All you do is click to add a blue tick in the box beside the name of the Page and press the “Add to Menu Button”. Or, another option is the click multiple pages with the blue tick and press “Add to Menu”, which will add them all at once.

Know that you can create multiple menu’s for the one website. This can provide context-specific navigation, optimize for different devices, or guide users through unique user journeys. This includes variations for Headers, Footers, Mobile view only or specific call to action pages.

3. Editing the Order of the Header Menu

Each Header Menu item has more options to choose from when it comes to designing what’s displayed. When you hit the small down arrow on each menu item, this includes:

• Navigation Label – when changing the words differently to the Page Title.
• Menu Parent – To be used when creating your dropdown lists.
• Menu Order – Lists the number of pages you have in your menu and what number this page this one is.
• Then a link to “Remove” from your Header Menu, or “Cancel” to go back.

Apart from changing the label, or removing it from the header, I personally find the above way of using the “Menu Parent” slow for ordering your menu and much prefer the “Drag and Drop” way.

To do this:

• you just need to “left click” your mouse on the Header Menu box and drag it to where you want it positioned, then release your mouse.
• To make it a dropdown, just drag and indent the menu item slightly

If you need a visual on this, please click to watch the video embedded above.

In the end, once you’re happy with the menu order and names, press “Save Menu” down the bottom.

And you’re done with the first part!

4. Customising the Header Menu

The next step after the Menu Order is customising your websites header the see this menu, where it’s positioned at the top of your blog, appearance, colours, spacing and design.

To do this please:

• Hover on “Appearance” and press “Customize”
• Click the option for “Header”

This page show three different areas to help us design the header menu:

• On the left hand side of the page we have all the different options to choose and customise our header
• On the right is a preview view of our website
• and down the bottom is the “Drag and drop” section (Header Builder) to position the different aspects of our header menu.

Available items to bring into the Menu

If you’re starting from scratch, then you’ll firstly need to “Drag and Drop” the “Available Items” on the left hand side, into the “Header Builder” (bottom boxed section) under the preview.

You have 6 boxed areas for your Header Menu with 3 vertical and 3 horizontal (although you can add more than 1 Available items to each Box) and the following is what you can Drag into there:

• Primary Navigation
• Secondary Navigation
• Search
• Socials
• Logo
• Button
• HTML

If you don’t see the Menu you just created, then you need to first select it. Using the “Available items” mentioned above, you need to drag and drop the “Primary Navigation” into the bottom section.

Note : To be honest, put it anywhere, we only want to see and it can be moved later if you don’t like the positioning.

Choosing the Menu

If you don’t see the heading you created in Step 2, then you can either:

• Option 1 – Press “Primary Navigation” on the left hand side, then “Select Menu”, then under “Primary”, use the dropdown box to choose the Menu name you created.
• OR Option 2 – Find the “Primary Navigation” box down the bottom in the Header Builder section and press the “Settings Cog”. Then press “Select Menu”, then under “Primary”, use the dropdown box to choose the Menu name you just created.

While you’re here, please also check the “Mobile Menu“, especially if you want a different one. Yes, Kadence has to option to create a Primary and Secondary Header Menu, along with a more simplified one for Mobile Use.

Typically, the mobile menu will start as the three lines, or what we call the Hamburger menu. However, when it comes to mobile views, simple is best and you certainly have the option to set up a different menu entirely compared to desktop in Kadence.

Design (Spacing, Colours)

From the “Primary Navigation” settings, you can also change the design of your Header menu in both the “General” and “Design” tab.

This includes (but not limited to) things like:

• Spacing, Margins, Padding
• Font and size
• underlines,
• colours for the text & backgrounds
• and even a separate section for designing the dropdown menu.

There are hundreds of different options and changes you can have here and I show a few of them in the video above. My biggest advice is to just click around and play with the settings, until you find something you’re comfortably with and suits your business needs.

In the end, this can be change quickly and easily at any time, so it’s definitely not set in stone at this point in time. I do recommend hitting the “Publish” button every so often, just so your changes are saved.

Adding Socials to header

In todays society, most businesses will have Social platforms created and the Header is a good place to position them for a reader to follow and subscribe. To do this:

• From “Appearance”, “Customise” and “Header” menu on the left hand side we have “Available Items” to choose from.
• Grab the “Socials” item and drag it into the Header Builder area at the bottom of your customise page.

Once you release you mouse, check your preview page on how it looks and if you don’t like it, drag it to another area.

• In the Header Builder, press the Social “Settings Cog”
• Click the blue button “Add Socials” and select from the list like Instagram, Youtube, or Facebook.
• Once added, use the down arrow to open and choose an “Icon” and the “Label”. You even have an option to select your own image.

On the left hand side at the bottom, there is a button to “Set Social Links”. When you Click to enter here, you can copy and paste all the different social links associated to you business.

If you don’t want to stop there, You can also look into adding a Search Bar and Upload your Business Logo.

Wrap Up

Once you’re happy with how the navigation looks, you can press “Publish” and then the “Cross” button to take you back to the WordPress main dashboard.