The Header runs across the top of every page on your site and typically holds your logo and site navigation. Customize it to show your brand colors and logo, point visitors to the pages that matter, and display announcements you want every visitor to see.
Your Header appears on every website page that uses it. Learn the difference between pages on Kajabi.
Note: This guide covers Kajabi Pages templates. If you use the Premier Legacy templates, see Customize a header in a page with Premier
Open the header editor
From the Dashboard, click the Website tab.
Select the Website Pages or Landing Pages tab.
Open the page editor for your page. Learn how to open the page editor.
In the sidebar panel, click Header.
Customize header colors and position
Set header text and background colors
Add your brand colors to the Header Text Color and Header Background Color settings.
By default, Kajabi adjusts the text color to match the brightness of your background color. A dark background gets light text, and a light background gets dark text:
Note: Your Header will populate across your website pages. Learn the difference between pages on Kajabi.
To use your own text and background colors instead, select both Header Text Color and Header Background Color. Your selections override the automatic text color.
Choose a header position
Choose how the Header sits on your page:
Normal is the default. The Header stays in line with your page and scrolls out of view as visitors scroll down.
Overlay places the Header over the first Section of your page:
Want to determine your own branded text and background colors?
Select your desired colors for both your Header Text Color and Header Background Color to override the dynamically adjusting text colors.
Create a fixed header
A fixed, or sticky, Header stays visible as visitors scroll, so your navigation is always within reach. It works on both desktop and mobile devices and isn't available with the legacy Premier template.
Open the header editor.
Select Enable sticky header.
Click Save to apply and keep your changes.
After you enable the sticky header, set the colors the Header uses once a visitor scrolls:
Sticky Text Color sets the Header text color when the page is scrolled.
Sticky Background Color sets the Header background color when the page is scrolled.
Note: In a landing page, these settings are in the Desktop layout section settings instead. Select Fixed on scroll to fix the Header, set the sticky colors, and click Save to apply and keep your changes.
Set header layout and typography
Desktop layout
Show or hide the Header on desktop devices and set its horizontal alignment:
Mobile layout
Show or hide the Header on mobile devices, set the hamburger menu icon color, and set the icon color when the sticky header is enabled.
Typography
Adjust the font size of your Header text on desktop and mobile devices:
Add a block to the header
Design a Header that fits your business by adding blocks. Each block adds one element, such as a logo or a menu.
Open the header editor.
Click Add Block.
Select the block type you want to add:
Header block types
Add and rearrange these block types to build your Header:
Announcement or Hello Bar
Show an important announcement or notification as a banner above your Header. Learn how to add an Announcement or Hello Bar.
Call to Action
Encourage visitors to take action, such as opening a page or buying an Offer, with a button in your Header. Learn more about using a Call to Action.
Dropdown Menu
Create a fluid navigation experience by adding a dropdown menu to your Header. Learn how to add a Dropdown Menu block.
Logo
Put your brand at the front of your page.
Menu
Displays a navigation menu you've already built so visitors can explore your site.
User Menu
Displays as your customer's avatar. A quick way to log in, log out, and reach their Library and account settings. If a visitor hasn't logged in yet, the block shows a Log In link instead of the Avatar.
Add a logo to the header
Brand your page by adding a Logo block to your Header. Show your logo as an image or as text.
Open the header editor.
Click Add Block.
Select Logo.
Select Image or Text as the Logo type.
If you selected Image, click Select Image and choose a new file or a recent file.
If you selected Text, enter your text in the Logo Text field.
Note: If you uploaded a Logo Image to the Branding section of your Site Detail Settings before you created the page, the Image logo type uses that logo by default. To use a different image on this page, select the image as described in the Image step above.
Image alt attribute
Enter a brief description of your logo image. The description supports SEO and accessibility, and it displays if the image can't load.
Logo image width
If you selected Image as your Logo type, adjust the image width to change how large your logo appears on your page.
Logo text color
If you selected Text as your Logo type, choose a site branding color or a custom color for your logo text.
Change the link of the header logo
By default, your Header Logo links visitors back to your site's homepage, either your Template Home or your Custom Homepage. To send visitors to a different page when they click your logo, change the link in the Code Editor.
Note: Changing the Header Logo link requires the Code Editor, which is included with the Kajabi Pro plan. Check kajabi.com/pricing for plan details.
Change the logo link in Kajabi Pages
Copy the link you want your Header Logo to open.
Open the Code Editor for your website or landing page.
Open the Snippets folder.
Click the
shared_block_logo.liquidfile.Find
<a class="logo" href="/">near or on line 14.Replace the forward slash (/) with your full URL, for example
https://help.kajabi.com.Click Save to keep your changes.
When the Save button changes from blue to white, click Preview to test your new Header Logo link.
Align and stretch header blocks
Control where each block sits in your Header with the Stretch block setting and each block's alignment setting.
Stretch block
Enable Stretch block to make a block fill the remaining space in the Header section. Enable it for the block on the far left of your Header. For example, to place your Logo on the far left and a Menu and User Menu block on the right, enable Stretch Block for your Logo:
Stretch block off:
Stretch block on:
Align a block in the header
Set a block's horizontal alignment to left, centered, or right-aligned. The position and alignment of surrounding blocks also affect this setting.
Align the User Menu dropdown
Set the text alignment for the items in your User Menu's dropdown.
Customize the header in a Premier page
The Premier Legacy template has its own Header settings. Use this section if your page is built with Premier.
Open the Premier header editor
From the Dashboard, click Website.
Click Website Pages or Landing Pages.
Click the Title of the page to open the editor.
In the sidebar, click Header.
In the Premier Header section, you can add a logo, a menu, a User Menu, an announcement, and a Call to Action.
Add a logo to a Premier header
Open the Premier header editor.
Select Text or Image as the Logo Type.
If you selected Image, click Select Image and choose a new file or a recent file.
If you selected Text, enter your text in the Logo Text field.
Optional: Enter a number in the Custom Logo Height field, using the format 10px or 10. The recommended range is 30 to 100.
Show a menu in a Premier header
Select Show Menu to display a navigation menu in your Header.
Note: To create and edit your menu links, click Edit your link lists below the Menu setting in the sidebar editor.
Show the User Menu in a Premier header
Select Show User Menu to display the User Menu in your Header, or clear it to hide the User Menu. Including a User Menu in the Header of a custom landing page gives customers easy access to the Products they have purchased and to their customer settings.
The User Menu displays as the customer's avatar. When visitors click the avatar, the dropdown opens so they can:
Open the Library
Edit and view their Customer Settings
Log in or log out of your site
Customize the User Menu language and colors to match your brand.
Note: When you preview your page as a logged-in admin, the User Menu shows the avatar you uploaded to your Account Details, or the default avatar. Customers who are logged in see the avatar they uploaded in their customer settings, or the default avatar.
Add an announcement to a Premier header
Select Show Announcement in the sidebar editor to display an announcement above your Header. Learn how to add an announcement to a Premier page.
Link the announcement to a:
Landing Page
Checkout Page
Downloadable file
URL to another page
Two Step Optin pop-up
Select Show Announcement in the sidebar editor to display an announcement above your Header. Learn how to add an announcement to a Premier page.
Link the announcement to a:
Landing Page
Checkout Page
Downloadable file
URL to another page
Two Step Optin pop-up
Set Premier header appearance
Choose the Background Color and text color, and set the Alignment of the Header section:
Inline keeps all blocks in the Header in a single row.
Stacked stacks all blocks in the Header section.
Add a Call to Action to a Premier header
Add a Call to Action button to your Header to encourage visitors to open a separate page, buy an Offer, and more.
Open the Premier header editor.
At the bottom of the sidebar, click Add Call To Action.
Customize the Call to Action Text, Button Action, and appearance.
Click Save to keep your changes.
Tip: Have more than one Call to Action? Drag and drop the Call to Action blocks in the Header editor to change their order.
FAQs
Why doesn't a header block show on my phone?
On phones and other small screens (less than 768 pixels wide), your Header shows only your Logo, the hamburger menu icon (three lines), the cart icon if you've turned on the cart, and any Announcement or Hello Bar. Menu, Dropdown menu, Call to action, User dropdown, and Social icons blocks move inside the hamburger menu, so visitors see them after they tap the menu icon. Alignment and Stretch block settings don't change this.
To show a button or image on phones without opening the menu, add it to a Section at the top of your page, right below the Header, instead of to the Header, and make sure its Hide on mobile setting is off. Then remove it from the Header so it doesn't appear twice on desktop.
Why do I see two Log In buttons in my Header?
The User Menu block shows its own Log In link when a visitor hasn't signed in. If your navigation menu also links to your login page, your Header shows two Log In buttons:
How do I show a single Log In button?
Remove the link to your login page from your navigation menu, and make sure your Header includes a User Menu block. Learn how to edit your navigation menu.
The User Menu block shows Log In until a visitor signs in, then switches to their Avatar. With the login link removed from your menu and a User Menu block in your Header, your Header shows a single Log In button.