Learn to add a custom Dropdown Menu to your Page Header with the Premier template. Lead your page visitors to landing pages, offers, and more with links in the streamlined format of a dropdown.
In this article:
Dropdown Menu
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
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:
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:
And that's how to add a Dropdown Menu to your Header with Premier! 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!
