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 format of a dropdown.
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 the Pages tab.
- 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.
Change the text displayed in your Header Section indicating the Dropdown Menu to your users:
Choose to display or hide the down arrow icon for your dropdown menu:
Select the link list (or navigation menu) used 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 visitors browser.
Dropdown Menu Alignment
Change the alignment of the text displaying each link in your dropdown menu (e.g., Left, Center, Right).
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.
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.