The Complete Guide to the Kadence Header Builder
The header is the most valuable real estate on your website. It is the first thing visitors see, it houses your primary navigation, and it dictates the overall feel of your brand.
For years, building a custom header in WordPress meant either writing custom CSS, buying a dedicated mega-menu plugin, or upgrading to a premium theme.
Kadence changed that. The Kadence Header Builder is widely considered the best free header customization tool in the WordPress ecosystem. It gives you a visual, drag-and-drop interface to build complex, multi-row headers with zero coding required.
If you have just installed the theme and want to understand the full ecosystem, check out our Kadence Review first. But if you are ready to build your header right now, here is the exact step-by-step workflow.
What is the Kadence Header Builder?
The Kadence Header Builder is a visual interface inside the WordPress Customizer. Instead of clicking through endless dropdown menus to change a logo size or a menu color, you look at a live preview of your website’s header.
You are presented with a grid system divided into rows (Top, Main, Bottom). Each row is divided into columns (Left, Center, Right). You simply drag elements—like your Logo, Primary Navigation, Search Icon, or Cart Icon—into these columns.
It is intuitive, fast, and completely free. You do not need Kadence Pro to access the core header builder.
Step-by-Step: How to Build a Custom Header
Let’s build a standard, professional header from scratch.
Step 1: Open the Customizer Go to your WordPress Dashboard and navigate to Appearance > Customize. Click on “Header” in the left-hand menu.
Step 2: Choose Your Layout You will see a visual grid. By default, Kadence gives you one Main Row. Click the “Add Row” button if you want a Top Row (great for announcements or secondary links) or a Bottom Row. For this tutorial, we will stick to a single Main Row.
Step 3: Drag and Drop Your Elements On the left side of the screen, you will see a list of available elements: Logo, Navigation, Search, Cart, Button, HTML, etc.
- Drag the Logo element into the Left column.
- Drag the Navigation element into the Center column.
- Drag the Search icon into the Right column.
Step 4: Adjust the Sizing and Spacing Click on the Main Row itself. In the settings panel, you can adjust the Row Height (e.g., set it to 80px for a taller, more premium feel). You can also adjust the top and bottom padding to give your header some breathing room.
Step 5: Style the Elements Click on the Navigation element. Here you can change the font size, text color, and the hover effect. Kadence allows you to set a specific underline or background color change when a user hovers over a menu item. Set this to your brand’s primary color.
Once you are happy with the design, click the “Publish” button at the top. Your new header is now live.
How to Create a Transparent Header
A transparent header (where the header sits directly over your hero image or video) is a massive trend in modern web design. Kadence makes this incredibly easy.
- Open the Header Customizer and click on your Main Row.
- Look for the “Background” setting. Change the background type to “Transparent” or simply remove the background color.
- Next, you need to change your text colors so they are visible against your background image. Click on your Logo and Navigation elements and change their text colors to White (or whatever contrasts with your image).
- Crucial Step: You only want this transparent header on your homepage. If you apply it globally, it will look terrible on your inner pages with white backgrounds.
To fix this, click the “Visibility” tab in the Main Row settings. Set the row to display only on the “Front Page” or specific pages where you have a hero image. For your inner pages, you will need to create a second header row or rely on the default layout.
How to Set Up a Sticky Header
A sticky header stays fixed at the top of the screen as the user scrolls down your website. This is excellent for user experience and conversions, as the navigation menu is always one click away.
In the free version of Kadence, you can enable a basic sticky header by going to your Main Row settings and turning on the “Sticky” toggle.
However, if you want advanced sticky behaviors—like shrinking the logo when the user scrolls, hiding the header until the user scrolls up, or adding a shadow effect when it sticks—you need Kadence Pro. The Pro Header Addon gives you granular control over the exact animation and behavior of the sticky element.
Mobile Header Customization
Over 60% of your traffic will come from mobile devices. If your mobile header is clunky, you will lose visitors.
Kadence allows you to design a completely separate header layout for mobile and tablet.
- In the Header Customizer, look at the bottom of the left-hand panel. You will see device icons for Desktop, Tablet, and Mobile.
- Click the Mobile icon. The grid will change to show the mobile layout.
- By default, Kadence uses an “Off Canvas” menu for mobile. This means your navigation links are hidden behind a hamburger icon. When the user clicks the icon, a sleek sidebar slides out with your menu.
- You can drag your Logo to the Left, the Hamburger Menu icon to the Right, and a Cart icon to the far Right.
- Click on the Off Canvas element to customize its width, background color, and the animation style (slide from left, right, or fade in).
Common Mistakes to Avoid
After building hundreds of headers with Kadence, here are the most common mistakes I see beginners make.
Mistake 1: Making the logo too massive. Just because you can set the logo width to 500px doesn’t mean you should. A massive logo pushes your navigation menu off the screen on desktop and looks unprofessional. Keep your logo width between 120px and 200px for a balanced look.
Mistake 2: Forgetting mobile contrast. You design a beautiful dark desktop header with white text, but you forget to check the mobile view. If your mobile menu opens with a white background, your white text will be completely invisible. Always check your mobile header colors specifically.
Mistake 3: Ignoring the “Shrink” feature. If you use a sticky header, a 90px tall header taking up the top of the screen while the user reads an article is annoying. If you have Kadence Pro, always use the “Shrink” feature to reduce the header height by 20-30% once the user starts scrolling.
Troubleshooting Header Issues
My header is overlapping my page content. This usually happens when you use a transparent header or a custom CSS position fix. If your header is set to “absolute” or “transparent,” it pulls out of the normal document flow. To fix this, go to your page builder (like Kadence Blocks or Elementor) and add top padding to your first row equal to the height of your header.
My mobile menu isn’t showing up. Ensure you actually assigned a menu to the “Primary” or “Mobile” location. Go to Appearance > Menus, select your menu, and check the box for “Primary” or “Mobile” under Menu Settings. If no menu is assigned, the hamburger icon will appear, but clicking it will show an empty space.
Frequently Asked Questions
1. Do I need Kadence Pro to build a good header?
No. The free Kadence Header Builder is incredibly powerful. You can build multi-row headers, customize mobile layouts, and create transparent headers completely for free. You only need Pro for advanced sticky animations and conditional header logic.
2. Can I use a mega menu with Kadence?
Yes. Kadence supports standard WordPress mega menus. If you use a plugin like JetMenu or the native Gutenberg mega menu blocks, Kadence will display them perfectly in the navigation area.
3. How do I remove the search icon from my header?
Simply open the Header Customizer, click on the Search element in your row layout, and click the trash can icon to remove it. Alternatively, just drag it out of the row and back into the available elements pool.
4. Can I add custom HTML to my header?
Yes. Kadence includes an “HTML” element in the header builder. You can drag this into any column and paste custom code, like a third-party widget, a custom button, or an embedding script.
If you are starting your site from scratch and need to configure the rest of your theme settings, follow our complete Kadence setup tutorial to get your entire site live and optimized.