Kadence’s header is fully customizable using the header builder. If you want to change or slightly customize your theme’s original header, you have complete control over the layout, including colors, fonts, and other elements.
Here’s a step-by-step guide to help you customize the Kadence header:
Open the Header Customization Panel:
Look for the “Header” option in the Customizer, then click on it to open the ‘Header‘ customization settings. This will bring a drag-and-drop section to the focus at the bottom of the page.
Customize the Header Layout:
Layouts: In the layout section, you can select from a range of header layouts, including standard, centered, and split. There are three section bars, and each can be modified, such as the background color, sectioning each bar to full-width or splitting, multiple columns, a single row, or a combination of rows, and what content you want to be added.
Drag & Drop: With Kadence’s intuitive drag-and-drop header builder, you can effortlessly drag logos, menus, social icons, buttons, widgets, and search bars to various header sections. You can also remove or rearrange these elements by dragging and dropping them into their positions.
Adjust the Header Elements:
Logo and Site Identity: By clicking on the logo section, you can easily upload a custom logo or adjust the site title and tagline. Additionally, you can modify the logo’s width, padding, and alignment.
Menu: Select a primary or secondary menu from the dropdown and customize the menu’s style, color, hover effects, and alignment. You can also create and edit your menus from the “Menus” tab in the Customizer or directly from the “Appearance > Menus” section in the dashboard.
Search Bar, Social Icons, Button, etc: To customize your header, simply click on any element in the header builder to access its settings. Then, adjust the style, color, size, and behavior of each element as per your requirements.
Call to Action: Use the button element to add a call to action, such as a link to a contact page or a newsletter signup.
Styling the Header:
Colors: Change the background color, add gradience or an image, change the text color, and link the color of the header.
Typography: You can adjust the font family, size, weight, and other typography settings for different elements (site title, menu items, etc.).
Spacing and Padding: Adjust the spacing and padding to control the distance between header elements and their positioning within the header.
Configure the Sticky Header:
Navigate to the header settings and locate the Sticky Header option.
Activate it to ensure the header remains visible as users scroll down the page. You can also personalize its style, colors, and behavior, enabling it to shrink on scroll.
Using Kadence Pro Features (If Available):
If you have Kadence Pro, you will have additional options:
Transparent Header: To overlay the page content with the header, simply enable the transparent header option. Then, You can customize the transparent version’s background, text color, and logo. From here, you can also choose to enable/disable the transparent header for mobile and have the ability to set a different logo when the transparent header is enabled.
Mobile Header: Optimize the header for mobile devices by customizing the layout, logo size, menu behavior, and more.
Preview and Publish:
When you’re ready to see how your changes look, use the live preview on the right side of the Customizer. Once you’re happy with the customization, click the “Publish” button at the top of the Customizer panel to save your changes.
Tips for Advanced Customization:
Custom CSS: For more precise changes, simply add custom CSS by navigating to Appearance > Customize > Additional CSS.
Header Templates: If you’re using Kadence Blocks Pro you can create a custom header template in Appearance > Elements and assign it globally.
Kadence Blocks or Pro Add-ons: When using Kadence Pro or Kadence Blocks, you can access a range of additional options and modules that significantly enhance your header customization capabilities.
How To Quickly Maneuver Around The Elements:
To quickly modify an element in the customizer, hover over an element you want to change. Click the blue pencil popup, which will take you to the settings specific to that element.
NOTE: If some of these options are unavailable, you most likely do not have the Kadence Pro installed.