Get Started with Your 28-Day Trial of Kajabi ==> CLICK TO GET STARTED <==

How to Add a Dropdown Menu to Kajabi Premier Theme

If you would like to add a drop down menu to your Premier theme in Kajabi just like this one in this example.

You will need the ability to "edit code" in Kajabi which is reserved for Pro-Kajabi plan members or those grandfathered from in.

The process involves a two step process and a bit of code but don't worry, I provide it to you.

Step 1

Find the Premier Page you desire to which you will add the dropdown menu.

From the "Pages" or Pagebuilder view, use the ellipsis to select the "edit code" function.

Next, go to the "Sections" settings and look for header.liquid.  This is the file to open and edit.

Search for "-Showmenu" using CTRL-F (on Windows) or COMMAND-F (on a Mac Computer).  

We will add a bit of code that determines if our menu will be BEFORE the Kajabi navigation menu or the AFTERWARDS.  

Copy code below:

{% include "dropdown" %}

and paste it as desired. NOTE  If you decide to change the name/words 'dropdown' to something else, you will need to use the same name is step 2.

Save and close the file.

Step 2

Next, while still in the "edit code" mode, go to SNIPPETS.

Click the 'add new' link and type in dropdown or whatever name you chose in step 1.  Essentially, the menu or filename in step 1 must match the file we create here in step 2.

Copy the following code to the last </ul> 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>

[THIS IS NOT CODE - CODE STOPPED ABOVE]

Personally, I would copy it to plain text editor like notepad or use one from online.  Google around or try this one: https://www.rapidtables.com/tools/notepad.html

Next, make the modifications per the video.  You may have more or less than 3 dropdown menu items with associated URLS.  

Finally, copy the updated code to dropdown.liquid file. Save the file and Preview it.  If everything works, then close the file and the "edit code" mode and VOILA!!  You are done.

LOOKING FOR MORE KAJABI HELP? Check The Online Course Sales Machine Bootcamp

 

Close

50% Complete

Almost There...

Enter contact details to get the latest Blog articles.