How to Change the Link of a Header Logo

HelpCenter
calendar_month Updated

With the Code Editor available with Access or the Pro Plan, learn to change the link of your Header Logo. 

In this article:

Changing the link of your Header Logo requires the Code Editor only available with the Pro Plan or Access. Check out kajabi.com/pricing for details on the Pro Plan.

What is the Header Logo?

The Header Logo is located at the top of your page to display your brand and identify your site. In addition to branding your page, the Header Logo behaves as a clickable link to lead your page visitors back to the homepage of your site:

D9FEF71F-47F0-41C5-A663-FC3D90A08D68.png

Natively, the Header Logo is linked to the homepage of your site (i.e., Template Home or Custom Homepage).

However, if you wish to link to a different page when a visitor clicks your Header Logo, use the Code Editor available with the Pro Plan to change the link.

Looking to completely remove your Header Logo? Learn to customize your Header Logo in pages built with Premier or Kajabi Pages.

Changing the link with the Website Builder

First, copy the link you want your Header Logo to lead to.

Then, use the Code Editor to change your logo link:

  • Open the Code Editor for your desired website page.
  • Open the Snippets folder.
  • Click open the shared_block_logo.liquid file.
  • Locate <a class="logo" href="/"> near or on line 14.

In this code snippet, replace the forward slash (/) with your full URL (e.g., https://help.kajabi.com):

Click image to enlarge88C230FD-CB72-4DC6-8759-7AF37C46925B.png

After updating your Header Logo with your desired link:

  • Click Save to keep your changes.

After the Save button has transitioned from blue to white:

  • Click Preview to test your new Header Logo link.

Changing the link with Kajabi Pages

Note:
Changing the Header Logo link will also change the link in the Page Footer for your pages.

First, copy the link you want your Header Logo to lead to.

Then, use the Code Editor to change your logo link for a page:

  • Open the Code Editor for your desired page.
  • Open the Snippets folder.
  • Click open the shared_block_logo.liquid file.
  • Locate <a class="logo" href="/"> near or on line 14.

In this code snippet, replace the forward slash (/) with your full URL (e.g., https://help.kajabi.com):

Click image to enlarge88C230FD-CB72-4DC6-8759-7AF37C46925B.png

After updating your Header Logo with your desired link:

  • Click Save to keep your changes.

After the Save button has transitioned from blue to white:

  • Click Preview to test your new Header Logo link.

Changing the link with Premier

First, copy the link you want your Header Logo to lead to.

Then, use the Code Editor to change your logo link for a page built with Premier:

  • Open the Code Editor for your desired landing page built with Premier.
  • Open the Sections folder.
  • Click open the header.liquid file.
  • Locate <a href="/" kjb-settings-id="{{ kjb-H-LogoText }}"> near or on line 9.
  • Similarly, locate <a href="/" class="logo logo--image"> near or on line 14.

For both snippets of code, replace the forward slash (/) with your full URL (e.g., https://kajabi.com):

Click image to enlarge6E8BF1DC-CB3C-4874-BA82-7A616ABE8938.png

After updating your Header Logo with your desired link:

  • Click Save to keep your changes.

After the Save button has transitioned from blue to white:

  • Click Preview to test your new Header Logo link.

And that's how to change the link of a Header Logo! Please vote below and let us know if you found this article helpful. We value your feedback. Thanks for being the best part of Kajabi!

Did you find this article helpful?