Adding a Dropdown Menu to Your Page Header

Kayla M.

Updated

Learn to add a custom Dropdown Navigation Menu to your Header Navigation Menu to lead your page visitors with links to other landing pages, offers, and more within a streamlined dropdown format.

This guide refers to the latest page editor available with the Website Builder and Kajabi Pages. If you are using the Premier Legacy Templates, please refer to the guide here.

In this article:


How to add a dropdown menu block

Customize the appearance of your Header Menu by adding a Dropdown Menu:

  • Open the Website tab from your Dashboard.
  • Select either Website Pages or Landing Pages.
  • Open the page editor for your Page. Learn more
  • Navigate to the sidebar and open the Header section.
  • Click Add Content.
  • Select Dropdown Menu:


Customizing your dropdown menu block

Dropdown text color and dropdown background color

Design your Dropdown Menu to complement your branding colors by configuring the dropdown text color and dropdown background color. 

Click the Color icon to select a color from your site color palette.

If you prefer to use a custom color, click the color wheel and then either enter your RGB color code or use the sliders to choose your color.

  • The vertical bar allows you to select the hue.
  • The square box allows you to select the brightness and saturation.
  • The horizontal bar allows you to select the opacity of your color.

Dropdown Text

Change the text displayed in your Header Section to indicate the Dropdown Menu to your users:

F1B80ED3-8D95-4101-9D1A-AC947DF2A5AA.png

Show Icon

Note:
This feature is only available with your Website Builder pages. Learn about the Website Builder

Choose to display or hide the down arrow icon for your Dropdown Menu:

1C26ABC7-16E8-424E-93F8-0DCEF1C55A54.png

Menu

Select the link list (or navigation menu) to use for your Dropdown Menu Block.

The Dropdown Menu Block in the Header Editor includes simple settings to help you streamline the build of your page.

To create, customize, and change the menu used in your Dropdown Menu Block, learn to customize your Website Navigation Menus.

Note:
Quickly navigate to your Website Navigation Menus from the Dropdown Menu Block by clicking Edit your link lists directly below the Menu field in the sidebar editor.

Open In New Tab

Enable this setting to open the item selected from your menu in a new tab of your page visitor's browser. 

Dropdown Menu Alignment

Change the alignment of the text displaying each link in your Dropdown Menu (e.g., Left, Center, Right).

Stretch Block

Enable the Stretch Block setting to fill the remaining space of the Header Section. 

A good rule for using the Stretch Block feature is to enable the Stretch Block feature for the Block on the far left of your Header Section.

For example, if you want to have your Logo on the far left side of your Header and a Menu and User Menu on the far right side, select Stretch Block for your Logo:

Control the alignment and positioning of your Blocks by adjusting the Stretch Block and Block Alignment for the Blocks in your Header. 

Text Alignment

Adjust the horizontal alignment of your Block in the Header to appear more left, centered, or right-aligned. 

Keep in mind, this setting will be impacted by surrounding Blocks and their positioning and alignment.


And that's how to add a Dropdown Menu to your Page Header! 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!

Did you find this article helpful?

Need more help?

Contact Us