Kadence Theme includes a visual header and footer builder in the free version, which sets it apart from most lightweight themes that put this feature behind a paid upgrade. Here is how to use it effectively.
Opening the Header Builder
Go to Appearance, then Customise, then Header. You will see a visual grid representing the header layout. The grid has three sections: Top Bar (optional), Main Header, and Bottom Bar (optional). Each section has three columns. You add elements to columns by clicking the plus icon in any column.
Available Header Elements
Standard elements include: Logo, Navigation (primary or secondary), Button, Search, HTML (for custom content), Social Links, WooCommerce Cart, and Mobile Menu Toggle. The mobile toggle only appears in the mobile view and controls the collapsible mobile navigation.
Setting Up a Standard Logo-Left, Navigation-Right Header
- In the Main Header row, click the left column plus icon and add the Logo element.
- Click the right column plus icon and add the Navigation element.
- Click on the Logo element to set your logo image, alt text, and logo width.
- Click on the Navigation element to set menu assignment, spacing, link colours, and hover effects.
- Save and publish.
Enabling a Sticky Header
Click on the Main Header row settings (the pencil icon on the row itself). Under the Sticky tab, enable Sticky Header. You can configure the sticky behaviour to activate after scrolling a set number of pixels, or immediately. Set a separate background colour for the sticky state if you want the header to change colour on scroll.
Transparent Header Over Hero Sections
In the Main Header row settings, go to the Transparent tab. Enable Transparent Header. Set transparent background to transparent or a semi-transparent colour. Configure separate colours for logo, navigation links, and menu hover in the transparent state. Set specific pages where the transparent header should appear — typically the homepage — and leave it disabled on interior pages.
Mobile Header Configuration
Click the mobile icon at the top of the Customiser to switch to the mobile view of the header builder. The mobile layout is a separate grid. The typical mobile layout has the logo in the left column and the Mobile Menu Toggle in the right column.
Click on the Mobile Menu Toggle to configure the hamburger icon style and the mobile navigation behaviour — options include a dropdown below the header, a fullscreen overlay, or a side drawer. Set mobile menu colours separately from the desktop menu.
Adding a Top Bar for Contact Information
Enable the Top Bar row in the header builder. Add an HTML element to the left or right column and enter your phone number or address. Add Social Links to the opposite column for a professional header layout. Style the top bar with a darker background colour to visually separate it from the main header.
Fixing Common Header Problems
If the transparent header shows a background colour on some pages, check whether those pages have a specific header setting override in the Kadence meta box in the page editor. Kadence adds per-page header controls including a transparent header override. If sticky header content is overflowing or misaligned, check z-index and inspect CSS with browser developer tools — third-party plugin content in the header sometimes needs a z-index adjustment.
For custom header functionality beyond the Kadence builder — mega menus, dynamic content in the header, or custom mobile navigation — a WordPress developer can extend the Kadence header with custom code in a child theme.