Back to Kajabi Contact Us

How to Add a Dropdown Menu to your Header with Premier

  • Updated

Learn to add a custom Dropdown Menu to your Page Header with the Premier theme to lead your page visitors with links to other landing pages, offers, and static pages in a streamlined format of a dropdown.

This article refers to the Premier Legacy Themes and may be outdated! If you are using the new Kajabi Pages Themes, please refer to the updated guide here.

In this article:

Note:
Adding a Dropdown Menu with Premier requires access to the Code Editor available with the Pro Plan. Learn more about our different plans at kajabi.com/pricing.

Dropdown Menu

Adding a Dropdown Menu to you header is a great way to provide additional links in the beautiful, sleek design of a dropdown:

Step 1: Add code

First, open the Code Editor for the Page you wish to customize.

  • Click open the Sections folder.
  • There, click the header.liquid file.
  • Locate {% if h-ShowMenu %} near line 24.
  • Copy and paste {% include "dropdown" %}  onto the line below {% if h-ShowMenu %}.
  • Click Save to keep your changes:

Step 2: Create dropdown file

  • Next, open the Snippets folder.
  • Then, click Add a new Snippet.
  • Enter dropdown into the name field and click Create File:

Step 3: Edit Dropdown Menu

In your new dropdown.liquid file, copy and paste the code below:

<ul class="nav navbar-nav" style="margin: 0; display: inline-block;">
<div class="dropdown">
<div class="dropdown-content">
</div>
</div>
<li class="dropdown" style="margin: 0;">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">ENTER NAME ON NAV BAR</a>
<ul class="dropdown-menu">
<li><a href="https://enterlinkhere.com/">OPTION 1</a></li>
<li><a href="https://enterlinkhere.com/">OPTION 2</a></li>
<li><a href="https://enterlinkhere.com/">OPTION 3</a></li>
</ul>
</li>
</ul>

  • Replace ENTER NAME ON NAV BAR with the name you wish to display to your users in the Header. 
  • Customize the text displayed in your dropdown menu by changing https://enterlinkhere.com/, OPTION 1, OPTION 2, OPTION 3.
  • Click Save to keep and apply your changes.
  • Then, Preview your Page:

Tip:
Link to your other pages built in Kajabi by copying and pasting your page link. Learn to copy your page link.

Change the Dropdown Spacing (Optional)

Looking to change the vertical spacing between your dropdown navigation links? This step requires additional coding in the Code Editor of your page.

  • In the Code Editor, open the Assets folder.
  • Select the override.scss file.
  • Copy and paste the code below:
li{
    margin: 1px
}
  • Change the margin value (1px) in the code to adjust the spacing to your preference.
  • Click Save to keep and apply your changes.
  • Then, Preview your Page.

Related articles