The navigation menu element will add a navigation menu to the top of your funnel page. This is useful for linking to different sections of the page or linking to other pages in your funnel. When you add the navigation menu element, you will have editing options on the left-hand side.

General Settings #

Element Name #

In the General Settings section, you will find the default name of the Edit option you are currently working on. You can keep it as is or rename it to something more descriptive. Renaming the element is highly recommended as it will help you identify it easily later when you review your funnel elements list.

Menu Items #

The Menu Items feature enables you to include essential navigational options such as Home, About, Team, and Contact Menus on your website’s navigation bar. You can add more options by clicking on the “+ Add Item” button.

Line Height #

With the Line Height feature, you can increase the vertical spacing between text lines by either adjusting the size bar or typing a number in the designated field. This customization allows for improved readability and aesthetics of your content.

Text Transform #

Using the Text Transform feature, you can change the text format to Uppercase, Lowercase, or capitalize each word. This customization allows you to modify the text style for enhanced visual appeal and readability.

Letter Spacing #

The Letter Spacing feature allows you to adjust the space between each letter in your text.

Text Align #

Using the Text Align feature, you can adjust the positioning of your text to your liking. You have the option to position it to the left, center, right, or as justified.

Font Weight #

For both Desktop and Mobile Views, you can adjust the thickness of your text using the Font Weight feature.

Typography Type #

The Typography Type dropdown will give you options for the font of your navigation bar. You can choose to use the headline or content font that you set up in settings or choose a custom font. With the custom font option, you will then be able to select from a variety of fonts with an additional dropdown.

Mobile View Icon #

You can add an icon to your page by simply selecting from the available icons. If you have the desired icon in mind, you can type it into the search bar to narrow down the options.

Dropdown Icon #

Add a dropdown icon to your menu by selecting from the available options in the style editor. The icon will indicate when an item can expand, and it includes a smooth rotation animation.

Font Size #

Adjust the font size of a particular text/content for both mobile and desktop devices easily by dragging the size bars. You can preview the mobile font size to ensure it is formatted correctly by toggling the mobile view in the top menu bar of the builder.

Spacing Option #

The Spacing Option feature offers a variety of spacing options to adjust your content. The settings will only apply to the Edit option you are currently working on.

• Padding Left, Right, Top, and Bottom: Four toggle bars allow you to move your content to the left, right, top, or bottom. Drag the toggle bar to increase or decrease the space you want.
• Margin Top and Bottom: Toggle the bars to adjust the top or bottom margin of your content, adding negative space to the top or bottom of your element.
• Menu Item Alignment: This feature helps you control the overall layout and spacing of the items to ensure your navigation menu is both visually appealing and functional.
• Menu Item Spacing: Adjust the spacing of your menu items by moving the bar or inputting a desired number into the box.
• Business Name: Toggle on this feature to add a business name to the menu. However, toggling this will not register your business with legal authorities.

Menu Item Direction #

Menu Item Direction allows you to choose between displaying your navigation bar in the default or reversing order.

Background Color #

To change the background color of your navigation menu, simply click the color option of your choice. This feature enables you to customize the appearance and feel of your menu for desktop devices.

Mobile Background Color #

To modify the mobile background color of your navigation menu, click the desired color option. This enables you to customize the appearance of your menu for mobile devices. You can also see the color change when you open the Hamburger Menu in the desktop view.

Color Options #

The Color Options feature enables you to adjust various text and icon colors to suit your preferences.

• Background Color: Change the background color of your navigation bar or section for desktop view.
• Mobile Background Color: Customize the background color for your navigation menu specifically in mobile view.
• Popup Background Color: Adjust the background color of any popups linked to your navigation menu, such as dropdown menus.
• Mobile Popup Background Color: Set the background color for popups displayed in mobile view.
• Color: Controls the text color when it is in its default (non-bold, non-italicized) form.
• Hover Background Color: Change the background color of the Hover here. This works only on the Desktop view.
• Hover Text Color: Change the color of your Hover text here.
• Bold Text Color: When a text is in bold form, you can change the color here.
• Italic Text Color: Edit an italic text color here. To make an italic text, highlight the text and click on the Slant “I” icon.
• Underline Text Color: Edit an underlined text color here. To underline your text, highlight the text and click on the underlined “U” icon.
• Icon Color: If you have an icon added to this page, you can edit the icon color here. Only the icon color will change regardless of the position it is placed.

Brand Logo Config #

By toggling on the “Logo in Menu” button, you can place your brand logo on the left corner of your navigation menu, enabling easier accessibility to your website. When you toggle on the button, editing options become available.

• Brand Logo: Add your brand logo to the menu by clicking on the image icon located on the right side of the designated space. Upload your logo image, copy the image URL using the clipboard icon, then paste the URL into the Brand logo space provided.
• Optimize Image Load: Ensure that your logo image is optimized for fast loading by compressing it to an appropriate size before uploading.
• Width and Height: Adjust the width and height of your brand logo to the desired size to fit your menu.
• Alt Text (for SEO): Use the Alt Text feature to input SEO keywords relevant to your brand so it shows up in relevant search queries.

Image Actions #

In the Actions feature, you have a variety of options to select from.

• Open popup: Display a popup when the image is clicked. You can customize the popup content and design.
• Go to Website URL: Indicate which website page you want to direct your visitors to.
• Hide & Show Elements: Toggle the visibility of specific elements on the page upon interaction.
• Scroll to Element: Create a smooth scrolling effect that directs visitors to a specific section of the page when the image is clicked.
• Step: Move to a specific step in your funnel when the image is clicked.
• Next Step: Automatically advance visitors to the next step in your funnel upon clicking the image.
• Call: Initiate a phone call to a pre-defined number when clicked.
• SMS: Compose and send a text message to a pre-specified number when the image is clicked.
• Email address: Open the user’s default email client with a pre-filled recipient email address, subject, or body content.

Advanced Settings #

Under Advanced Settings, you will have additional customization options.

Border Options #

The Border Options feature enables you to select the type of border you want for your content. Once you choose any of the available border types, the settings for the border appear, including thickness, color, radius, and style.

Shadow #

This feature allows you to add a shadow behind an element, creating a sense of depth and making the navigation menu stand out more prominently against the background.

Visibility #

To determine where a particular edit option will be visible, you can select either mobile devices, desktops, or both by clicking on the relevant icon.

Custom Class #

The Custom Class feature allows you to input your specific class to your content. Press enter or space to add a class.

CSS Selector #

When you are completed with your navigation bar setup, you will have the option to copy the Custom CSS to use elsewhere. Simply click on the copy icon to the right of the reference code to copy the code.

By utilizing the Navigation Menu Element, you can create a sleek and user-friendly navigation experience for your visitors. With extensive customization options, you have full control over your menu’s appearance and functionality, ensuring it aligns perfectly with your brand and enhances user engagement.

Frequently Asked Questions #

How do I add items to the navigation menu? #

Use the Menu Items feature to include options like Home, About, Team, and Contact, and click “+ Add Item” to add more.

Can I add my brand logo to the menu? #

Yes. Toggle on “Logo in Menu” in Brand Logo Config, upload your logo, set its width and height, and add alt text for SEO.

Can I set different background colors for desktop and mobile? #

Yes. Use Background Color for desktop and Mobile Background Color for mobile, plus separate popup colors for each.

What actions can menu/image clicks perform? #

Actions include opening a popup, going to a URL, showing/hiding elements, scrolling to an element, moving to a funnel step, calling, texting, or emailing.

How do I adjust spacing between menu items? #

Use Menu Item Spacing to move the bar or enter a number, and Menu Item Alignment to control the overall layout.

Can I show the navigation menu only on certain devices? #

Yes. Use the Visibility option in Advanced Settings to display the menu on mobile, desktop, or both.