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.
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:
Show Icon
Choose to display or hide the down arrow icon for your Dropdown Menu:
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.
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!