How to Add a Dropdown Menu to Kajabi Premier Theme

kajabi start Jul 22, 2020

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

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam. Sed dapibus est id enim facilisis, at posuere turpis adipiscing. Quisque sit amet dui dui.

Call To Action

Stay connected with news and updates!

Join our mailing list to receive the latest news and updates from our team.
Don't worry, your information will not be shared.

We hate SPAM. We will never sell your information, for any reason.