Skip to main content
Lead your page visitors to landing pages, offers, and more with links in the streamlined format of a dropdown.
Note: This article refers to the Premier Legacy Templates. If you are using the Kajabi Pages Templates, please refer to the updated guide here.
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.
Adding a Dropdown Menu to your Page Header is a great way to provide additional links using the beautiful, sleek design of a dropdown:

​
Step 1. Add code

Important: Introducing custom code to your site can open you up to vulnerabilities and potential malware attacks. We recommend using vulnerability tools like VirusTotal or Snyk to scan any custom code that you intend to use and apply certain best practices to help reduce potential impact.
First, open the Code Editor for the Page you wish to customize.
  • Click to open the Sections folder
  • Then, 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 link name you wish to display to your site users
  • Customize the sub-links and text in your Dropdown Menu by overwriting https://enterlinkhere.com/, OPTION 1, OPTION 2, OPTION 3 with your own URLs and text
  • 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.
  • In your Code Editor, open the Assets folder
  • Select the override.scss.liquid 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: