Navigation Menu

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 icon. 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. This feature enables you to customize the visual appearance of your content for optimal user experience. 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. It is crucial to keep in mind that the settings will only apply to the Edit option you are currently working on.

Padding Left, Right, Top, and Bottom: The Padding Left, Right, Top, and Bottom options include four toggle bars that allow you to move your content to the left, right, top, or bottom, depending on which toggle bar you click on. You can adjust the spacing by dragging the toggle bar to increase or decrease the space you want.

Margin Top and Bottom: By toggling the bars available for Margin Top and Bottom, you can adjust the top or bottom margin of your content. Drag the toggle bar to increase or decrease the size of your margin. This will add negative space to the top or bottom of your element, depending on which margin you toggle.

1. 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. 
2. Menu Item Spacing: In the Menu Item Spacing Options, you can adjust the spacing of your menu items. To do this, simply move the bar to increase the number until you achieve the desired spacing. You can also input a desired number into the box to ensure your element is spaced accordingly.
3. Business Name: Toggle on this feature to add a business name to the menu. However, toggling this won’t 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, enhancing the readability and user experience.

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: Allows you to change the background color of your navigation bar or section for desktop view. You can select a color from the palette.
• Mobile Background Color: Customizes the background color for your navigation menu specifically in mobile view, ensuring a cohesive design across devices.
• Popup Background Color: Adjust the background color of any popups linked to your navigation menu, such as dropdown menus.
• Mobile Popup Background Color: This lets you set the background color for popups displayed in mobile view, improving readability and style.
• Color: Controls the text color when it is in its default (non-bold, non-italicized) form. You can select any shade to match your branding.
• Hover Background Color: You can change the background color of the Hover here. This works only on the Desktop view.
• Hover Text Color: You can change the color of your Hover here.
• Bold Text Color: When a text is in bold form, you can change the color here
• Italic Text Color: You can only edit an italic text color here. To be able to make an italic text, you have to highlight the text and then click on the Slant “I” icon.
• Underline Text Color: You can only edit an underlined text color here. To underline your text, you have to highlight the text and then click on the underlined “U” icon.
• Icon Color: If you have an icon added to this page, you can only edit the icon color here. Only the icon color will change regardless of the position it’s 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: You can add your brand logo to the menu by clicking on the image icon located on the right side of the designated space. It will lead you to the import page, where you can upload your logo image. Afterward, click on the clipboard icon at the upper right corner of the page to copy the image URL. You can exit the import page and 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. This helps to enhance page speed and overall user experience.
• Width and Height: In this Width and Height section, you can adjust the width and height of your brand logo to the desired size to fit your menu. You may need to play around with different combinations of numbers to get the right fit.
• Alt Text (for SEO): Take advantage of the Alt Text feature to input SEO keywords relevant to your brand in the navigation bar section. It will enable your brand to show up in relevant search queries on search engines.

Image Actions #

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

• Open popup: This action allows you to display a popup when the image is clicked. You can customize the popup content and design based on your requirements.
• Go to Website URL: Upon selecting “Go to website URL” in the “Image Action” icon, you will be required to indicate which website page you want to direct your visitors.
• Hide & Show Elements: Use this action to toggle the visibility of specific elements on the page. You can set the image to either hide or reveal selected elements upon interaction.
• Scroll to Element: Selecting this action allows you to create a smooth scrolling effect that directs visitors to a specific section of the page when the image is clicked.
• Step: Use this action to move to a specific step in your funnel when the image is clicked. This is particularly useful for multi-step funnels.
• Next Step: This option automatically advances visitors to the next step in your funnel upon clicking the image.
• Call: Set the image to initiate a phone call to a pre-defined number when clicked. This action is ideal for encouraging direct communication with your audience.
• SMS: Use this action to compose and send a text message to a pre-specified number when the image is clicked.
• Email address: Configure the image to open the user’s default email client with a pre-filled recipient email address, subject, or body content, making it easy for visitors to contact you.”

Advanced Settings #

Under Advanced Settings, you will have additional customization 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, 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. This feature lets you choose where your edits will be visible and enables greater control of your content.

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’re 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.

What's your Reaction?

You have reacted on"Navigation Menu"


A few seconds ago