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.
In this article:
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:
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{
}
- 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.
